勉強したことのメモ

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

  関連記事

leaflet.jsとOSMでマーカーの画像をそれぞれ指定する

leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し ...

jQueryでHTMLの特定要素をループ時に逆順で処理する方法

jQueryでリスト(li)タグ等の特定要素をeach()でループ処理する場合、 ...

架空の地図画像をLeafletを用いてWeb上でマップ表示する方法

ゲーム攻略サイト等でゲーム内の地図をWeb上で表示し、マーカーを立てたりマウスホ ...

table内のiframeのheightを最大高さにする

tableのtdの中にリンクがあり、クリックすると td内でiframeが開く。 ...

JavaScriptでUNIXタイムスタンプ取得

UNIXタイムスタンプを用いた際、 年月日からすぐUNIXタイムスタンプを出した ...