Lightbox.jsでCSP(コンテンツセキュリティポリシー)エラーが発生した際の対応方法
2024/02/20
CSP(コンテンツセキュリティポリシー)設定を行っているサーバーでLightboxを使用すると「data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==」がどうのこうのというエラーが発生した。以下に対応方法をメモ。
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==とは
調べてみると1x1pxのblank.gif画像らしい。これをdataURI化して使用している為、今回はCSP設定にひっかかった模様。
対応方法
CSP設定を変更すればいいが、今回はサーバー設定変更は出来ない事情があった。なのでペイントツール等で1x1pxのblank.gifファイルを作成してファイルにアップロード。そしてlightbox.jsの以下部分を書き換える。
#書き換え前 <img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /> #書き換え後(画像のパスは適宜変更) <img class="lb-image" src="blank.gif" />
関連記事
-
-
JavaScriptでリファラをチェックし、ホスト名と一致するかどうかで分岐処理する方法
ページアクセス時にリファラがホスト名と一致していれば何らかの処理を、一致しない場 ...
-
-
Leafletでマップ上に通知(トースト)機能を追加する方法(Leaflet.Notifications)
Leafletでマーカー内のボタンクリック時等、ユーザーが何らかのアクションを行 ...
-
-
jQueryにて指定した要素を検索条件から除外するnot()の利用方法
あるソースコードを拝見しているとjQueryでnot()という使ったことの無いメ ...
-
-
Chart.jsで描写したグラフを画像としてダウンロードさせる方法
サイト内にChart.jsでグラフを描写し、ボタンやリンクをクリックすることで当 ...
-
-
jQueryにて複数のajax処理のレスポンスをまとめて表示する方法
同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...