${counts.fail || 0} failed, ${counts.warn || 0} warnings, ${counts.pass || 0} passed, ${counts.info || 0} informational.
+ `; +} + +function detectedBadge(item) { + if (item.detected === undefined) return ''; + const cls = item.detected === true ? 'detected-true' : item.detected === false ? 'detected-false' : 'detected-unknown'; + const label = item.detected === true ? 'Detected: Yes' : item.detected === false ? 'Detected: No' : 'Detected: Unknown'; + return `${label} `; +} + +function renderTestItem(item) { + const li = document.createElement('li'); + li.className = `test-item status-${item.status}`; + + const details = document.createElement('details'); + const summary = document.createElement('summary'); + summary.innerHTML = + ` ` + + `${escapeHtml(item.title)} ` + + `${detectedBadge(item)}` + + `— ${escapeHtml(item.summary)}`; + details.appendChild(summary); + + if (item.detail) { + const detail = document.createElement('p'); + detail.className = 'test-detail'; + detail.textContent = item.detail; + details.appendChild(detail); + } + + if (item.refs && item.refs.length) { + const refs = document.createElement('p'); + refs.className = 'test-refs'; + refs.innerHTML = + 'Reference: ' + + item.refs.map((r) => `${escapeHtml(r.label)}`).join(', '); + details.appendChild(refs); + } + + li.appendChild(details); + return li; +} + +function renderCategories(results) { + const container = document.getElementById('report'); + container.innerHTML = ''; + + for (const [key, meta] of Object.entries(CATEGORIES)) { + const items = results.filter((r) => r.category === key); + if (!items.length) continue; + + const section = document.createElement('section'); + section.className = 'category'; + + const heading = document.createElement('h3'); + heading.textContent = meta.title; + section.appendChild(heading); + + const desc = document.createElement('p'); + desc.className = 'category-desc'; + desc.textContent = meta.description; + section.appendChild(desc); + + const list = document.createElement('ul'); + list.className = 'test-list'; + items.forEach((item) => list.appendChild(renderTestItem(item))); + section.appendChild(list); + + container.appendChild(section); + } +} + +function reportAsText() { + const lines = lastResults.map((r) => `[${STATUS_LABEL[r.status]}] (${r.category}) ${r.title}: ${r.summary}`); + return [`WebView Check report — ${location.href}`, `User-Agent: ${navigator.userAgent}`, '', ...lines].join('\n'); +} + +async function main() { + const results = await runAll([ + detectionTests, + bridgeTests, + transportTests, + chromeUiTests, + storagePermissionsTests, + ]); + lastResults = results; + const verdict = computeVerdict(results); + + renderBanner(verdict, results); + renderCategories(results); +} + +document.getElementById('copy-report').addEventListener('click', async () => { + const button = document.getElementById('copy-report'); + try { + await navigator.clipboard.writeText(reportAsText()); + button.textContent = 'Copied!'; + } catch (err) { + button.textContent = 'Copy failed — clipboard unavailable'; + } + setTimeout(() => { + button.textContent = 'Copy report'; + }, 2000); +}); + +main(); diff --git a/assets/js/check/tests/bridge.js b/assets/js/check/tests/bridge.js new file mode 100644 index 0000000..2ac7c5b --- /dev/null +++ b/assets/js/check/tests/bridge.js @@ -0,0 +1,66 @@ +import { STATUS } from './registry.js'; + +const REPORT_SOP = { + label: '§6.1.2 Same Origin Policy Bypass — Security Considerations for WebViews', + url: 'https://webview-cg.github.io/webview-security/', +}; +const REPORT_BRIDGE = { + label: '§8.3 Bridge Validation — Security Considerations for WebViews', + url: 'https://webview-cg.github.io/webview-security/', +}; + +// Known native bridge globals. Detected by presence only — never invoked, since calling +// into a real bridge can trigger native side effects (camera, file pickers, navigation, ...). +const BRIDGES = [ + { path: ['webkit', 'messageHandlers'], name: 'window.webkit.messageHandlers', platform: 'WKWebView (iOS/macOS)' }, + { path: ['chrome', 'webview'], name: 'window.chrome.webview', platform: 'WebView2 (Windows)' }, + { path: ['Android'], name: 'window.Android', platform: 'common Android JS-interface name' }, + { path: ['ReactNativeWebView'], name: 'window.ReactNativeWebView', platform: 'React Native WebView' }, + { path: ['cordova'], name: 'window.cordova', platform: 'Apache Cordova' }, + { path: ['_cordovaNative'], name: 'window._cordovaNative', platform: 'Apache Cordova (Android bridge)' }, + { path: ['flutter_inappwebview'], name: 'window.flutter_inappwebview', platform: 'flutter_inappwebview plugin' }, + { path: ['Capacitor'], name: 'window.Capacitor', platform: 'Ionic Capacitor' }, + { path: ['__wxjs_environment'], name: 'window.__wxjs_environment', platform: 'WeChat embedded browser' }, +]; + +function resolvePath(path) { + let obj = window; + for (const key of path) { + if (obj == null || typeof obj !== 'object') return undefined; + obj = obj[key]; + } + return obj; +} + +function bridgeTest(bridge) { + return { + id: `bridge-${bridge.name}`, + category: 'bridge', + title: bridge.name, + refs: [REPORT_SOP, REPORT_BRIDGE], + run() { + const found = resolvePath(bridge.path) !== undefined; + if (found) { + return { + status: STATUS.WARN, + detected: true, + summary: `${bridge.name} is exposed on this page (${bridge.platform})`, + detail: + 'A native bridge object gives the host app a channel to inject and execute privileged code in this ' + + 'page\'s context, regardless of the page\'s own origin policy. This is expected in a hybrid app, but it ' + + 'means the host — not the page — controls what code can run here. This check only detects the object\'s ' + + 'presence and does not call it.', + signal: { label: 'webview', weight: 4 }, + }; + } + return { + status: STATUS.PASS, + detected: false, + summary: `${bridge.name} not present`, + detail: '', + }; + }, + }; +} + +export default BRIDGES.map(bridgeTest); diff --git a/assets/js/check/tests/chrome-ui.js b/assets/js/check/tests/chrome-ui.js new file mode 100644 index 0000000..dd5f575 --- /dev/null +++ b/assets/js/check/tests/chrome-ui.js @@ -0,0 +1,47 @@ +import { STATUS } from './registry.js'; + +const REPORT_UI = { + label: '§6.2.1 Visible Origin and TLS Status — Security Considerations for WebViews', + url: 'https://webview-cg.github.io/webview-security/', +}; + +const chromeVisibility = { + id: 'chrome-ui-bars-visible', + category: 'chrome-ui', + title: 'Visible browser chrome (address bar, toolbar, ...)', + refs: [REPORT_UI], + run() { + const bars = { + locationbar: !!window.locationbar && window.locationbar.visible, + toolbar: !!window.toolbar && window.toolbar.visible, + menubar: !!window.menubar && window.menubar.visible, + statusbar: !!window.statusbar && window.statusbar.visible, + }; + const anyVisible = Object.values(bars).some(Boolean); + const detail = Object.entries(bars) + .map(([name, visible]) => `${name}: ${visible}`) + .join(', '); + + if (anyVisible) { + return { + status: STATUS.PASS, + detected: true, + summary: 'Standard browser chrome (address bar or toolbar) is reported as visible', + detail, + signal: { label: 'browser', weight: 1 }, + }; + } + return { + status: STATUS.WARN, + detected: false, + summary: 'No standard browser chrome is reported as visible', + detail: + `${detail}. When no origin/TLS indicator is visible, a user has no way to verify which site they are ` + + 'interacting with, which is a common setup for fullscreen or embedded WebViews. Note this also happens in ' + + 'legitimate popups opened via window.open(), so treat this signal together with the others on this page.', + signal: { label: 'webview', weight: 2 }, + }; + }, +}; + +export default [chromeVisibility]; diff --git a/assets/js/check/tests/detection.js b/assets/js/check/tests/detection.js new file mode 100644 index 0000000..d14867b --- /dev/null +++ b/assets/js/check/tests/detection.js @@ -0,0 +1,86 @@ +import { STATUS } from './registry.js'; + +const REPORT_USAGE = { label: '§4 WebView Categories — Usage Scenarios and Challenges', url: 'https://webview-cg.github.io/usage-and-challenges/' }; + +const androidWvToken = { + id: 'detection-android-wv-token', + category: 'detection', + title: 'Android WebView user-agent token', + refs: [REPORT_USAGE], + run() { + const ua = navigator.userAgent; + const matches = /; ?wv\)/i.test(ua); + if (matches) { + return { + status: STATUS.WARN, + detected: true, + summary: 'User-agent carries the Android System WebView "wv" token', + detail: `User-agent: ${ua}`, + signal: { label: 'webview', weight: 3 }, + }; + } + return { + status: STATUS.PASS, + detected: false, + summary: 'No Android "wv" token present', + detail: `User-agent: ${ua}`, + }; + }, +}; + +const iosUaAmbiguity = { + id: 'detection-ios-ua', + category: 'detection', + title: 'iOS WebView user-agent signature', + refs: [REPORT_USAGE], + run() { + const ua = navigator.userAgent; + const isAppleWebKit = /iPhone|iPad|iPod|Macintosh/.test(ua) && /AppleWebKit/.test(ua); + if (!isAppleWebKit) { + return { + status: STATUS.INFO, + summary: 'Not an Apple WebKit platform user-agent — this check does not apply', + detail: `User-agent: ${ua}`, + }; + } + return { + status: STATUS.INFO, + detected: null, + summary: 'Cannot be determined — iOS does not expose a reliable WKWebView user-agent signature', + detail: + 'On Apple platforms a WKWebView-based in-app browser can present a user-agent nearly identical to Safari\'s. ' + + 'This check cannot reliably distinguish a WKWebView from Safari from the user-agent string alone — see the ' + + 'platform inconsistencies documented in the Usage Scenarios and Challenges report.', + }; + }, +}; + +const displayMode = { + id: 'detection-display-mode', + category: 'detection', + title: 'Standalone / app-like display mode', + refs: [REPORT_USAGE], + run() { + const modes = ['standalone', 'fullscreen', 'minimal-ui']; + const active = modes.find((m) => window.matchMedia && window.matchMedia(`(display-mode: ${m})`).matches); + if (active) { + return { + status: STATUS.WARN, + detected: true, + summary: `Page is running in "${active}" display mode`, + detail: + 'This mode is also used by installed PWAs, so on its own it is a weak signal — combine it with the bridge ' + + 'and browser-chrome checks below.', + signal: { label: 'webview', weight: 1 }, + }; + } + return { + status: STATUS.PASS, + detected: false, + summary: 'Page is running in a normal browser tab display mode', + detail: '', + }; + }, +}; + +export default [androidWvToken, iosUaAmbiguity, displayMode]; diff --git a/assets/js/check/tests/registry.js b/assets/js/check/tests/registry.js new file mode 100644 index 0000000..b45cda1 --- /dev/null +++ b/assets/js/check/tests/registry.js @@ -0,0 +1,41 @@ +export const STATUS = { PASS: 'pass', WARN: 'warn', FAIL: 'fail', INFO: 'info' }; + +export function withTimeout(promise, ms, fallback) { + return Promise.race([ + promise, + new Promise((resolve) => setTimeout(() => resolve(fallback), ms)), + ]); +} + +export async function runAll(testGroups) { + const tests = testGroups.flat(); + const results = []; + for (const test of tests) { + let outcome; + try { + outcome = await test.run(); + } catch (err) { + outcome = { status: STATUS.INFO, summary: 'Check failed to run', detail: String((err && err.message) || err) }; + } + results.push({ + id: test.id, + category: test.category, + title: test.title, + refs: test.refs || [], + ...outcome, + }); + } + return results; +} + +export function computeVerdict(results) { + let score = 0; + for (const r of results) { + if (!r.signal) continue; + score += r.signal.label === 'webview' ? r.signal.weight : -r.signal.weight; + } + let verdict = 'uncertain'; + if (score >= 3) verdict = 'webview'; + else if (score <= -2) verdict = 'browser'; + return { score, verdict }; +} diff --git a/assets/js/check/tests/storage-permissions.js b/assets/js/check/tests/storage-permissions.js new file mode 100644 index 0000000..079feae --- /dev/null +++ b/assets/js/check/tests/storage-permissions.js @@ -0,0 +1,82 @@ +import { STATUS } from './registry.js'; + +const REPORT_STORAGE = { + label: '§6.1.6 Storage Handling — Security Considerations for WebViews', + url: 'https://webview-cg.github.io/webview-security/', +}; +const REPORT_TRACKING = { + label: '§6.1.7 Anti-Tracking Measures — Security Considerations for WebViews', + url: 'https://webview-cg.github.io/webview-security/', +}; +const REPORT_PERMISSIONS = { + label: '§6.1.5 Permissions Handling — Security Considerations for WebViews', + url: 'https://webview-cg.github.io/webview-security/', +}; + +const cookiesEnabled = { + id: 'storage-cookies-enabled', + category: 'storage-permissions', + title: 'Cookies enabled', + refs: [REPORT_STORAGE], + run() { + if (navigator.cookieEnabled) { + return { status: STATUS.PASS, summary: 'Cookies are enabled', detail: '' }; + } + return { status: STATUS.INFO, summary: 'Cookies are disabled', detail: '' }; + }, +}; + +const storageAccessApi = { + id: 'storage-access-api', + category: 'storage-permissions', + title: 'Storage Access API availability', + refs: [REPORT_TRACKING], + run() { + const available = 'hasStorageAccess' in document; + return { + status: STATUS.INFO, + summary: available + ? 'document.hasStorageAccess is available' + : 'document.hasStorageAccess is not available', + detail: + 'This only reports whether the API exists, not whether tracking protection is actually enforced — the ' + + 'report notes users generally have no visibility into whether a host app has disabled tracking prevention ' + + '(e.g. via Android CookieManager) or whether iOS Intelligent Tracking Prevention is active.', + }; + }, +}; + +const PERMISSION_NAMES = ['geolocation', 'camera', 'microphone', 'notifications']; + +const permissionsMatrix = { + id: 'permissions-api-matrix', + category: 'storage-permissions', + title: 'Permissions API support matrix', + refs: [REPORT_PERMISSIONS], + async run() { + if (!navigator.permissions || !navigator.permissions.query) { + return { + status: STATUS.INFO, + summary: 'navigator.permissions is not available', + detail: 'Permission state cannot be queried from script in this environment.', + }; + } + const results = await Promise.all( + PERMISSION_NAMES.map(async (name) => { + try { + const status = await navigator.permissions.query({ name }); + return `${name}: queryable (state: ${status.state})`; + } catch (err) { + return `${name}: not queryable`; + } + }) + ); + return { + status: STATUS.INFO, + summary: 'Permissions API query support varies by platform', + detail: results.join('; '), + }; + }, +}; + +export default [cookiesEnabled, storageAccessApi, permissionsMatrix]; diff --git a/assets/js/check/tests/transport.js b/assets/js/check/tests/transport.js new file mode 100644 index 0000000..b55111c --- /dev/null +++ b/assets/js/check/tests/transport.js @@ -0,0 +1,98 @@ +import { STATUS, withTimeout } from './registry.js'; + +const REPORT_TLS = { + label: '§6.1.1 & §6.1.4 Host Control / TLS and Mixed Content — Security Considerations for WebViews', + url: 'https://webview-cg.github.io/webview-security/', +}; + +function probeFetch(url, timeoutMs = 5000) { + const attempt = fetch(url, { mode: 'no-cors', cache: 'no-store', redirect: 'follow' }) + .then(() => 'reached') + .catch(() => 'blocked'); + return withTimeout(attempt, timeoutMs, 'timeout'); +} + +const secureContext = { + id: 'transport-secure-context', + category: 'transport', + title: 'Secure context / page protocol', + refs: [REPORT_TLS], + run() { + if (location.protocol === 'file:') { + return { + status: STATUS.INFO, + summary: 'Page loaded from a local file:// origin', + detail: 'The mixed-content probe below does not apply to file:// origins.', + }; + } + if (window.isSecureContext && location.protocol === 'https:') { + return { status: STATUS.PASS, summary: 'Page is loaded over HTTPS in a secure context', detail: `Protocol: ${location.protocol}` }; + } + return { + status: STATUS.WARN, + summary: 'Page is not in a secure context', + detail: `Protocol: ${location.protocol}, isSecureContext: ${window.isSecureContext}`, + }; + }, +}; + +function tlsProbe(host) { + return { + id: `transport-tls-${host}`, + category: 'transport', + title: `TLS validation — ${host}`, + refs: [REPORT_TLS], + async run() { + const result = await probeFetch(`https://${host}/`); + if (result === 'reached') { + return { + status: STATUS.FAIL, + summary: `A request to ${host} (deliberately invalid certificate) succeeded`, + detail: + 'The environment appears to accept an invalid TLS certificate. A correctly configured browser or ' + + 'WebView should refuse this connection outright, since accepting it enables man-in-the-middle attacks.', + }; + } + if (result === 'blocked') { + return { + status: STATUS.PASS, + summary: `Request to ${host} was correctly rejected`, + detail: 'The deliberately invalid certificate was not accepted.', + }; + } + return { + status: STATUS.INFO, + summary: `Request to ${host} timed out`, + detail: 'Inconclusive — this can also happen when the network blocks the test domain outright.', + }; + }, + }; +} + +const mixedContent = { + id: 'transport-mixed-content', + category: 'transport', + title: 'Mixed content (plain HTTP from an HTTPS page)', + refs: [REPORT_TLS], + async run() { + if (location.protocol !== 'https:') { + return { status: STATUS.INFO, summary: 'Skipped — this page was not loaded over HTTPS', detail: '' }; + } + const result = await probeFetch('http://neverssl.com/'); + if (result === 'reached') { + return { + status: STATUS.WARN, + summary: 'A plain HTTP request from this HTTPS page succeeded', + detail: + 'Mixed content should normally be blocked automatically once a page is served over HTTPS. The host app ' + + 'may have relaxed this restriction, allowing unencrypted traffic to be intercepted or modified.', + }; + } + if (result === 'blocked') { + return { status: STATUS.PASS, summary: 'Mixed HTTP content was blocked as expected', detail: '' }; + } + return { status: STATUS.INFO, summary: 'Mixed content probe timed out', detail: 'Inconclusive.' }; + }, +}; + +export default [secureContext, tlsProbe('expired.badssl.com'), tlsProbe('self-signed.badssl.com'), mixedContent]; diff --git a/pages/check.html b/pages/check.html new file mode 100644 index 0000000..731c095 --- /dev/null +++ b/pages/check.html @@ -0,0 +1,44 @@ +--- +layout: default +title: WebView Check +permalink: /check/ +--- + + ++ This page runs a set of in-browser checks to see whether it is being displayed inside a + native app's WebView, and whether that WebView is configured in a way that weakens the + security guarantees a normal browser tab provides. The checks are based on the + Security Considerations for WebViews + and + WebView: Usage Scenarios and Challenges + reports from the W3C WebView Community Group. +
+