ローカルでの開発中...
svg を mask-image として挿入する際にあたふたしたので備忘録として残しておきます。
アドベントカレンダーの初記事で、svgの色変更の方法について書きました。
このうちの二つ目、svgを mask-image として読み込んだとき、svgが表示されない問題がありました。
とりあえずmask-imageを使ってみる
See the Pen Untitled by 小笠原怜 (@dkyyizoy-the-selector) on CodePen.
完全に良い感じです。
mask-image として svg を挿入し、background-color でホバー時も楽々色を変えられます。
。。。
と思いきや！何をどうやっても svg が表示されない！！
background-color じゃなくて color ？とか、
svg で fill を currentColor にしないといけない？とか、
散々遠回りした挙句、コンソールを開くという快挙を成し遂げました。
Access to image at 'file:///Users/<ユーザ名>/Desktop/projects/<プロジェクト名>/img/icon-link.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.
アクセスできてなさそうです！！！
そしてなんと、こんなことが MDN に書いてありました。
CORS ポリシーにより、HTTP および HTTPS プロトコルで提供される画像ソースのみが 値として受け入れられます。相対または絶対 file:// プロトコルを含む、ローカルで提供されている画像は受け入れられず、透明な黒として表示されます。URL 画像ソースをローカルで検査するには、ローカルサーバーを設定してください。
今回は html と Sass のみで開発をしていたので、ローカルサーバーすら立ち上げていない状況でした。
ローカルサーバーを立ち上げて svg 表示されない問題は一旦の解決をみました！！
CORS とは
CORS（Cross-Origin Resource Sharing）とは、リソースへのオリジンをまたいだアクセスを許可するかどうかを決めるポリシーです。
。。。？
オリジンは、リクエストの発生元のスキーム、ホスト名、ポート番号を含みます。
こんな感じ↓
Origin: null
Origin: <scheme>://<hostname>
Origin: <scheme>://<hostname>:<port>
二つのページのプロトコル、ポート番号 (もしあれば)、ホストが等しい場合、両者のページは同じオリジンです。
つまり、このオリジンが同一だったらアクセスを許可するのか、オリジンが異なってもアクセスを許可するのかを決めるのが CORS っていうこと。。。
もう一回さっきのエラーを見てみると。
Access to image at 'file:///Users/<ユーザ名>/Desktop/projects/<プロジェクト名>/img/icon-link.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.
svg のオリジンが null になっている。
いろんなケースでオリジンが null になるようですが、今回はスキームが http, https, ftp, ws, wss, gopher のいずれでもないオリジンに該当します。
ローカルでファイルを表示していただけなので、オリジンが null であるファイル同士でアクセスできなかったみたいです。
現行のブラウザーでは、 file:/// スキームを使用して読み込まれたファイルのオリジンは、通常、不透明なオリジンとして扱われます。 つまり、ファイルが同じフォルダー内にある他のファイルを記載している場合（例えば）、それらは同じオリジンから来ているとはみなされず、 CORS エラーが発生する可能性があります。
ここのオリジンの定義がとてもわかりやすいです（公式ってすごい）。
コンソールを開こう
コンソールを開くという行為がまだまだ習慣化されていない私は結構な時間を無駄にしました.....。
ネットワークタブも眺めていると勉強になりますね。
origin とか、strict-origin-when-cross-origin とか、ヒントがたくさんありました。
ものすごくちなみにの脱線
mask-imageについて！
Chrome では接頭辞 -webkit をつけないといけないという情報に踊らされましたが、現在はほとんどのブラウザが mask-image に対応しています（IE...）。
以前は独自プロパティであったものが標準化されたみたい。
今回はCORSについてなんとなーく理解できました。
開発の妨げ...！と一瞬思いましたが、セキュリティ面で非常に重要みたいです。今度はそこも深掘りしてみようと思います！！
参考