From 0814e28778ae3b9ec98de6fb7b13533d1e00a07b Mon Sep 17 00:00:00 2001 From: Ilya Kreymer Date: Wed, 10 Apr 2024 16:27:04 -0700 Subject: [PATCH] Adblock Support for Embeds (#308) Fixes #307 - Adds optional adblock support, via wabac.js (dependent on webrecorder/wabac.js#167). - For now, adblock enabled only for embeds via the `useAdblock` attribute, and can be enabled per archived item. - By default, adblock filter rules from [EasyList](https://easylist.to/easylist/easylist.txt) are used, however, a custom filter rules file can be used via `adblockRulesUrl` attribute (default is ./adblock/adblock.gz) - Added `fetch-adblock.sh` script to fetch latest easylist, filter out `##` rules and compress to `./adblock/adblock.gz` - Not yet possible to enable adblock for standalone browsing via replayweb.page - bumps version to 2.0.0-beta.3 --- .gitignore | 2 ++ adblock/fetch-adblock.sh | 4 ++++ mkdocs/site/docs/embedding/index.md | 2 ++ mkdocs/sitefiles.txt | 1 + package.json | 6 +++--- src/appmain.ts | 5 +++++ src/embed.ts | 10 ++++++++++ src/item.ts | 1 + yarn.lock | 8 ++++---- 9 files changed, 32 insertions(+), 7 deletions(-) create mode 100755 adblock/fetch-adblock.sh diff --git a/.gitignore b/.gitignore index 809ee59..fdc984a 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,7 @@ coverage/ **/__pycache__/ dist/ plugins-*/ +adblock/adblock.gz !mkdocs/site/docs/examples/*.warc mkdocs/_genhtml/ mkdocs/site/index.html @@ -19,4 +20,5 @@ mkdocs/site/embed.html mkdocs/site/webmanifest.json mkdocs/site/favicons mkdocs/site/ruffle +mkdocs/site/adblock ipfs-core.min.js diff --git a/adblock/fetch-adblock.sh b/adblock/fetch-adblock.sh new file mode 100755 index 0000000..5fa715b --- /dev/null +++ b/adblock/fetch-adblock.sh @@ -0,0 +1,4 @@ +#!/bin/bash +# Fetch latest rules from easylist, filter out only css selector hiding rules (rules containing '##') +curr=$(dirname "${BASH_SOURCE[0]}") +curl "https://easylist.to/easylist/easylist.txt" | grep '##' | gzip -9 > $curr/adblock.gz diff --git a/mkdocs/site/docs/embedding/index.md b/mkdocs/site/docs/embedding/index.md index a4d5a27..6d7af85 100644 --- a/mkdocs/site/docs/embedding/index.md +++ b/mkdocs/site/docs/embedding/index.md @@ -151,6 +151,8 @@ The `#!html ` tag is a web component that supports a number of | `requireSubdomainIframe` | If set, will only load embed in an iframe loaded from a subdomain, for increased origin isolation. | | `loading="eager"` | If set, will load the entire WACZ file at once (regardless of size), and not attempt on-demand range request loading. | | `useRuffle` | If set, will enable include Ruffle Flash emulator. Must include the `ruffle/` directory in `replayBase`. | +| `useAdblock` | If set, will enable adblocking, by injecting CSS stylesheets to hide ads based on a list of ad filter rules. By default, the [EasyList](https://easylist.to/) filter rules are used. | +| `adblockRulesUrl` | Provide a URL to a custom [Adblock Plus filter rules](https://adblockplus.org/filters) formatted text file. Note that only rules containing CSS selectors (via `##` filter) are used, other lines in the rules list are ignored. | ## Further Examples diff --git a/mkdocs/sitefiles.txt b/mkdocs/sitefiles.txt index 2da89c3..084cf66 100644 --- a/mkdocs/sitefiles.txt +++ b/mkdocs/sitefiles.txt @@ -5,3 +5,4 @@ embed.html webmanifest.json favicons ruffle +adblock diff --git a/package.json b/package.json index e21d74e..d9236b0 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "replaywebpage", "productName": "ReplayWeb.page", - "version": "2.0.0-beta.2", + "version": "2.0.0-beta.3", "description": "Serverless Web Archive Replay", "repository": "https://github.com/webrecorder/replayweb.page", "homepage": "https://replayweb.page/", @@ -12,7 +12,7 @@ "dependencies": { "@fortawesome/fontawesome-free": "^5.15.4", "@shoelace-style/shoelace": "^2.8.0", - "@webrecorder/wabac": "^2.17.3", + "@webrecorder/wabac": "^2.18.0", "bulma": "^0.9.3", "electron-log": "^4.4.1", "electron-updater": "^5.3.0", @@ -73,7 +73,7 @@ "/index.html" ], "scripts": { - "build": "webpack --mode production", + "build": "webpack --mode production && ./adblock/fetch-adblock.sh", "build-dev": "webpack --mode development", "build-docs": "yarn run build && cd mkdocs && ./copy-site.sh && mkdocs build", "publish-docs": "yarn run build && cd mkdocs && ./copy-site.sh && mkdocs gh-deploy --force", diff --git a/src/appmain.ts b/src/appmain.ts index 6677c96..8cf26f2 100644 --- a/src/appmain.ts +++ b/src/appmain.ts @@ -608,6 +608,11 @@ export class ReplayWebApp extends LitElement { this.loadInfo!.extraConfig.baseUrl = this.pageParams.get("basePageUrl"); } + if (this.pageParams.get("adblockUrl")) { + this.loadInfo!.extraConfig = this.loadInfo!.extraConfig || {}; + this.loadInfo!.extraConfig.adblockUrl = this.pageParams.get("adblockUrl"); + } + if (this.pageParams.get("customColl")) { this.loadInfo!.customColl = this.pageParams.get("customColl"); } diff --git a/src/embed.ts b/src/embed.ts index 3784eae..0bd0757 100644 --- a/src/embed.ts +++ b/src/embed.ts @@ -29,6 +29,8 @@ let defaultReplayFile = ""; const DEFAULT_REPLAY_BASE = "https://replayweb.page/"; +const DEFAULT_ADBLOCK_FILE = "./adblock/adblock.gz"; + // =========================================================================== class Embed extends LitElement { @property({ type: String }) url = ""; @@ -64,6 +66,9 @@ class Embed extends LitElement { @property({ type: Boolean }) noCache = false; @property({ type: Boolean }) hideOffscreen: boolean | undefined; + @property({ type: Boolean }) useAdblock = false; + @property({ type: String }) adblockRulesUrl = DEFAULT_ADBLOCK_FILE; + @property({ type: String }) newWindowBase = ""; @property({ type: String }) errorMessage: @@ -287,6 +292,7 @@ class Embed extends LitElement { loading?: "eager"; swName?: string; ruffle?: "1"; + adblockUrl?: string; } = { source, customColl: this.coll, @@ -324,6 +330,10 @@ class Embed extends LitElement { params.ruffle = "1"; } + if (this.useAdblock && this.adblockRulesUrl) { + params.adblockUrl = this.adblockRulesUrl; + } + this.paramString = new URLSearchParams( // Converting to unknown here so that we can ignore the URL -> string conversion necessary for the types to work out params as unknown as Record, diff --git a/src/item.ts b/src/item.ts index 6a20890..4de1239 100644 --- a/src/item.ts +++ b/src/item.ts @@ -72,6 +72,7 @@ export type LoadInfo = { baseUrl?: unknown; headers?: unknown; recording?: unknown; + adblockUrl?: string | null; }; customColl?: string | null; noWebWorker?: boolean; diff --git a/yarn.lock b/yarn.lock index cf9b04e..9a22335 100644 --- a/yarn.lock +++ b/yarn.lock @@ -905,10 +905,10 @@ resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.1.tgz#34bdc31727a1889198855913db2f270ace6d7bf8" integrity sha512-0G7tNyS+yW8TdgHwZKlDWYXFA6OJQnoLCQvYKkQP0Q2X205PSQ6RNUj0M+1OB/9gRQaUZ/ccYfaxd0nhaWKfjw== -"@webrecorder/wabac@^2.17.3": - version "2.17.3" - resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.17.3.tgz#7e059aeef3eea68958793552dd1f96db9a19ce1e" - integrity sha512-D5CEMTP/+obOD6dh6ZIDNhY905AekzT12RMTrgL7Rq4RTB3mR6d1FKXDWh1MftPIvowlAGBBTu2C3KpFby+KZQ== +"@webrecorder/wabac@^2.18.0": + version "2.18.0" + resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.18.0.tgz#6eafa51ffb53e785a9b7a36bd8c12cbf60f06cc2" + integrity sha512-tpZ7saCQMWcrbQrB7421ycfucKFFBRXg3OrTSPkk71FtGSQ8LFtmCPnpWWu/wJgWcnC7ka7CnIuaX3rW2A42oA== dependencies: "@peculiar/asn1-ecc" "^2.3.4" "@peculiar/asn1-schema" "^2.3.3"