Widget: Document and improve situation around COEP (Z#23149909) (#4051)

src/pretix/control/templates/pretixcontrol/event/widget.html

@@ -19,8 +19,8 @@
                 section of your website:
             {% endblocktrans %}
         </p>
-        <pre>&lt;link rel="stylesheet" type="text/css" href="{% abseventurl request.event "presale:event.widget.css" %}"&gt;
-&lt;script type="text/javascript" src="{{ urlprefix }}{% url "presale:widget.js" lang=form.cleaned_data.language %}" async&gt;&lt;/script&gt;</pre>
+        <pre>&lt;link rel="stylesheet" type="text/css" href="{% abseventurl request.event "presale:event.widget.css" %}" crossorigin&gt;
+&lt;script type="text/javascript" src="{{ urlprefix }}{% url "presale:widget.js" lang=form.cleaned_data.language %}" async crossorigin&gt;&lt;/script&gt;</pre>
         <p>
             {% blocktrans trimmed %}
                 Then, copy the following code to the place of your website where you want the widget to show up:

src/pretix/presale/views/widget.py

@@ -100,6 +100,7 @@ def widget_css(request, **kwargs):
         try:
             resp = FileResponse(default_storage.open(o.settings.presale_widget_css_file),
                                 content_type='text/css')
+            resp['Access-Control-Allow-Origin'] = '*'
             return resp
         except FileNotFoundError:
             pass
@@ -108,6 +109,7 @@ def widget_css(request, **kwargs):
     f = finders.find(et)
     resp = FileResponse(open(f, 'rb'), content_type='text/css')
     resp._csp_ignore = True
+    resp['Access-Control-Allow-Origin'] = '*'
     return resp
 
 
@@ -199,6 +201,7 @@ def widget_js(request, lang, **kwargs):
             cache.set('widget_js_data_{}'.format(lang), data, 3600 * 4)
         resp = HttpResponse(data, content_type='text/javascript')
     resp._csp_ignore = True
+    resp['Access-Control-Allow-Origin'] = '*'
     return resp
 
 

src/pretix/static/pretixpresale/js/widget/widget.js

@@ -843,7 +843,7 @@ var shared_lightbox_fragment = (
         + '</div>'
         + '<div class="pretix-widget-lightbox-inner" @click.stop="">'
             + '<figure class="pretix-widget-lightbox-image">'
-                + '<img :src="$root.lightbox.image" :alt="$root.lightbox.description" @load="lightboxLoaded" ref="lightboxImage">'
+                + '<img :src="$root.lightbox.image" :alt="$root.lightbox.description" @load="lightboxLoaded" ref="lightboxImage" crossorigin>'
                 + '<figcaption v-if="$root.lightbox.description">{{$root.lightbox.description}}</figcaption>'
             + '</figure>'
             + '<button type="button" class="pretix-widget-lightbox-close" @click="lightboxClose" aria-label="'+strings.close+'">'
@@ -1947,6 +1947,10 @@ var shared_root_computed = {
         return target;
     },
     useIframe: function () {
+        if (window.crossOriginIsolated === true) {
+            console.warn("pretix Widget cannot use iframe due to Cross-Origin-Embed-Policy")
+            return false;
+        }
         return !this.disable_iframe && (this.skip_ssl || site_is_secure());
     },
     showPrices: function () {