勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Lightbox.jsでCSP(コンテンツセキュリティポリシー)エラーが発生した際の対応方法

   2024/02/20  JavaScript サーバー

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 サーバー

  関連記事

jQueryでユーザーが編集可能な文字列をページ上に表示する際にエスケープする方法

GETパラメータを取得し、その内容をページ上に表示したいケースがあった。また、A ...

JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法

先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...

JavaScriptのIntersectionObserverを利用して指定した要素が表示されているか確認する方法

ブラウザ上で指定した要素が表示されているかチェックし、表示されている場合は何らか ...

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...

指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法

指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.j ...