Content Security Policy setting

[itsgifnotjiff]

I am trying to ensure that an embeded Google maps iframe displays properly when I build and deploy to GitHub Pages and I have no idea where to set the unsafe-inline property for the Content Security Policy so that I do not get a 404 once deployed. Any ideas where and how I would do this in this Vue 3/Vite static SPA?

<v-row>
  <div style="width: 100%">
    <iframe src="data.mapUrl" width="100%" height="450" frameborder="0" style="border:0;" loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>
</v-row>

[logue]

This question is outside the scope of this template question.

CSP settings are set by the callee, not by the caller (the program deployed with this template). I'm not using Google Maps right now, so I'm not sure, but since I use iframes, I think it's necessary to set the allowed domain on the GoogleMaps side of the caller.

If you just want to display a map and display marker pins, I think you should use OpenLayers (vue3-openlayers) or Leaflet.

[itsgifnotjiff]

Interesting I thought I could set the CSP through meta attributes on my end. By the way is there a specific way to add and use OpenLayers in this template or is it as simple as npm install ol and adding to main.ts, vue.use(ol)? I know in previous versions loading the CSS and declaring it globally was not trivial? Thank you so much Mr. @logue for your wonderful template and work.