地図のマスが全部「Access blocked」になり、黄色い斜線のタイルだけが並ぶ——そんな画面を、Firefox と Opera で見ました。Chrome では普通に地図が出ていることもあります。
原因を辿ると、アプリ側が付けていた Referrer-Policy: no-referrer が、OpenStreetMap のコミュニティタイル（tile.openstreetmap.org）の利用条件に引っかかっていました。
何が起きていたか
タイル画像のリクエストが 403 で返り、タイル自体に次のような文言が出ます。
- Access blocked
- App is not following the tile usage policy …
- osm.wiki/Blocked
ブラウザによって差が出やすいのは、プライバシー設定や拡張機能で Referer をさらに落としている場合があるからです。サイト側で最初から Referer を消していると、どのブラウザでも再現しやすくなります。
ポリシーが求めていること（ウェブ）
OpenStreetMap の Tile Usage Policy では、コミュニティ運営のタイルサーバーについて、おおむね次が必須です。
- 正しい HTTPS のタイル URL
- 地図上の帰属表示（© OpenStreetMap contributors など）
- ウェブでは有効な HTTP
Refererを送ること Refererを送れなくする厳しい Referrer-Policy を付けないこと（no-referrerや、実質送れない設定）- キャッシュを無視するヘッダを既定で付けない
- 大量の事前取得（スクレイピング）をしない
ブラウザの既定動作なら足りる、と書かれている一方で、サイト側のセキュリティヘッダで Referer を全部落とすと、ポリシー違反として弾かれます。
Wiki の Blocked tiles でも、Referer 欠如による自動ブロックが説明されています。
直し方の要点
ぼくのいるところでは、レスポンスヘッダを次のように変えました。
- 変更前:
Referrer-Policy: no-referrer - 変更後:
Referrer-Policy: strict-origin-when-cross-origin
これでクロスオリジンのタイル要求には、少なくとも オリジン（例: https://place.bokuapp.com/） が Referer として付きます。フルパスは送らないので、パス漏洩を抑えつつポリシーを満たせます。
確認は簡単です。
curl -sI https://example.com/ | grep -i referrer-policy地図ライブラリ（Leaflet など）側の話に見えることがありますが、ページ全体の Referrer-Policy が先に効いているケースが多いです。
セキュリティとの折り合い
no-referrer は「外に何も漏らさない」方向で分かりやすい選択です。ただ、OSM の無償タイルのように Referer を身元確認に使う外部サービス と組み合わせると衝突します。
折り合いの取り方は、だいたい次のどれかです。
- ポリシーが許す範囲の Referrer-Policy にする（今回）
- OSM コミュニティタイルをやめ、利用条件の合うタイル提供者へ切り替える
- 自前でタイルを持つ（重い）
「地図を出したい」と「Referer を一切出したくない」を同時に満たすなら、1 ではなく 2 か 3 の方が筋がいい、とも言えます。
いまの結論
真っ黒な地図タイルは、必ずしも「地図ライブラリが壊れた」ではありません。セキュリティヘッダと、ボランティア運営のタイル利用条件がぶつかっていることがあります。
Firefox だけで再現するなら、拡張機能の Referer 遮断も疑いつつ、まず自サイトの Referrer-Policy を疑うのが近道でした。