Content-Security-Policy のヘッダと meta タグを組み立てます(引用符の補正と書き漏れの警告つき・ブラウザ内で完結)
Content-Security-Policy(CSP)は、そのページが JavaScript・CSS・画像などをどこから読み込んでよいかをブラウザに宣言するHTTPレスポンスヘッダです。宣言に無い出どころからの読み込みはブラウザ側で止まります。攻撃者がページに差し込んだスクリプトも、出どころが許可されていなければ動きません。default-src 'self' のように、ディレクティブ名のあとに許可する出どころを空白区切りで並べ、ディレクティブ同士は ; で区切ります。
'self' 'none' 'unsafe-inline' などのキーワードは、シングルクォートを含めて1つのトークンです。引用符を落とすとホスト名として解釈され、意図した意味になりません。このツールは self のように裸で入力しても自動で 'self' に直します。一方 https: data: blob: のスキーム指定と、https://cdn.example.com のようなホスト指定には引用符を付けません。
default-src は fetch 系ディレクティブの既定値です。script-src を書かなければ default-src が使われます。ただしすべてが default-src に落ちるわけではありません。base-uri・form-action・frame-ancestors は default-src を継承しないので、必要なら明示的に書く必要があります。このツールはこの3つが空のときに注意を出します。
nonce('nonce-xxxx')を書いたディレクティブでは、ブラウザは 'unsafe-inline' を無視します。仕様がそう定めているためで、nonce を導入すると古いブラウザ向けに残した 'unsafe-inline' は効かなくなります。これは意図した挙動(新しいブラウザほど厳しくなる)ですが、nonce を付けたつもりでインラインスクリプトが全部止まる、という事故の原因にもなります。nonce はリクエストごとに変える必要があるので、このツールは {NONCE} という差し込み位置を出力します。サーバ側で毎回ランダム値に置き換え、同じ値を <script nonce="..."> にも書いてください。
Report-Only から始めてください。Content-Security-Policy-Report-Only で配ると、違反があってもブロックせず報告だけが出ます。実際のアクセスで何が落ちるかを見てから、本番のヘッダに切り替えるのが安全です。このツールの「Report-Only(報告のみ)」がその形を出します。
HTTPヘッダを推奨します。<meta http-equiv> でも多くのディレクティブは効きますが、frame-ancestors・report-uri・sandbox は meta では効きません。また meta はHTMLの解析がそこまで進んでから適用されるので、それ以前の読み込みには間に合いません。ヘッダを設定できない環境での次善策と考えてください。
いいえ。入力から組み立て・コピーまで、すべての処理はお使いのブラウザ内(JavaScript)で完結します。入力内容がサーバーへ送信されることはありません。