Facebookのページプラグインで生成されるHTMLコードにNonce属性が付与されている意味を知りたい

Question

実現したいこと

• Facebookのページプラグインで生成されるHTMLコードにNonce属性が付与されている意味を知りたい

前提

Webサイト作成を行っており、Facebookページの埋め込みを検討しています。

Facebookページを埋め込むために以下のページで埋め込み用コードを取得しています。
https://developers.facebook.com/docs/plugins/page-plugin

質問内容

前提で記載しました埋め込み用コードの中で、
JavaScript SDKを読み込むためのscriptタグが生成されるようなのですが、このタグにnonce属性が付与されています。

nonce属性によるスクリプト実行抑制を行う場合は、
埋め込み対象のサイトのコンテンツセキュリティポリシー設定でNonceを指定している場合だと思うのですが、
生成コードで必ずnonce属性を付与しているのはなぜなのでしょうか。

付与されている理由、用途、背景など何かご存じの方がいましたらご教授願います。

該当のソースコード

タグ末尾のnonce属性

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v16.0" nonce="********">

Comments

[m.ts10806]

提供者にしか分からない意図になると思いますが、例えば外してみて不都合はありましたか？

[kentaro4673]

コメントありがとうございます。
いえ、外してみても埋め込みページは表示されます。
実際に実装して今後問題が起きた時の為に、意図を知っておきたいという感じです。
やはり提供者しか付与する意図は分からないですよね。。

[m.ts10806]

他のAPIでもそうかとは思いますが最も制約や制限の多い環境に向けて最大限の機能がデフォルトでついた状態で提供しておくことで、より広くそのままで利用されるようになってるんじゃないかなと推測します（自身が提供者だとしたら、やはり面倒な問い合わせや個別対応は避けたい）

[kentaro4673]

確かに私もコメントいただいてそう思いました。
不要な機能の削除なら個々でできますもんね。
解決することが出来ました。ありがとうございます！

[m.ts10806]

言い換えると「ユーザが何も考えず使える」のを追い求めた結果かなと（あくまで私見なのでご注意を）
私自身、提供者側に近いですが外部アプリやAPIは大抵何も考えず書いてあるとおりに使ってしまってますね、
なので、質問者さんみたいに技術的観点で疑問に感じるのは非常に大事な感性だと思います。

[kentaro4673]

ありがとうございます！
Web開発はまだまだ新米なので色々と分からないことが多く。。
今後も質問させていただくことがありましたら、何卒よろしくお願いいたします！

Answer 1

nonce属性によるスクリプト実行抑制を行う場合は、
埋め込み対象のサイトのコンテンツセキュリティポリシー設定でNonceを指定している場合だと思うのですが、
生成コードで必ずnonce属性を付与しているのはなぜなのでしょうか。

書いてのとおり、「CSP設定している環境でも正常に使えるようにするため」ではないのでしょうか。CSPなしの環境でもあって害にはなりません。

Comments

[kentaro4673]

ご回答ありがとうございます。なるほどです。
いろんな環境を想定してコードを生成してくれている、という事ですね。
確かにCSP無しの環境でnonce属性が付いているタグが合っても動作に影響はないですもんね。