CGM_Public/pretix_cgo
1
0
Fork 0
forked from CGM_Public/pretix_original
Code Pull Requests Actions Activity

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

Browse Source
This commit is contained in:
Raphael Michel
2024-04-22 13:15:33 +02:00
committed by GitHub
parent 5f5001edb5
commit b6a42ac8d2
4 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
doc/user/events/widget.rst
View File

@@ -17,8 +17,8 @@ and then click "Generate widget code".
You will obtain two code snippets that look *roughly* like the following. The first should be embedded into the You will obtain two code snippets that look *roughly* like the following. The first should be embedded into the
``<head>`` part of your website, if possible. If this inconvenient, you can put it in the ``<body>`` part as well:: ``<head>`` part of your website, if possible. If this inconvenient, you can put it in the ``<body>`` part as well::
<link rel="stylesheet" type="text/css" href="https://pretix.eu/demo/democon/widget/v1.css"> <link rel="stylesheet" type="text/css" href="https://pretix.eu/demo/democon/widget/v1.css" crossorigin>
<script type="text/javascript" src="https://pretix.eu/widget/v1.en.js" async></script> <script type="text/javascript" src="https://pretix.eu/widget/v1.en.js" async crossorigin></script>
The second snippet should be embedded at the position where the widget should show up:: The second snippet should be embedded at the position where the widget should show up::
@@ -449,5 +449,14 @@ Further reading:
* `Stripe Payment Method Domain registration`_ * `Stripe Payment Method Domain registration`_
Working with Cross-Origin-Embedder-Policy
-----------------------------------------
The pretix widget is unfortunately not compatible with ``Cross-Origin-Embedder-Policy: require-corp``. If you include
the ``crossorigin`` attributes on the ``<script>`` and ``<link>`` tag as shown above, the widget can show a calendar
or product list, but will not be able to open the checkout process in an iframe. If you also set
``Cross-Origin-Embedder-Policy: require-corp``, the widget can auto-detect that it is running in an isolated enviroment
and will instead open the checkout process in a new tab.
.. _Let's Encrypt: https://letsencrypt.org/ .. _Let's Encrypt: https://letsencrypt.org/
.. _Stripe Payment Method Domain registration: https://stripe.com/docs/payments/payment-methods/pmd-registration .. _Stripe Payment Method Domain registration: https://stripe.com/docs/payments/payment-methods/pmd-registration

4
src/pretix/control/templates/pretixcontrol/event/widget.html
View File

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

3
src/pretix/presale/views/widget.py
View File

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

6
src/pretix/static/pretixpresale/js/widget/widget.js
View File

@@ -843,7 +843,7 @@ var shared_lightbox_fragment = (
+ '</div>' + '</div>'
+ '<div class="pretix-widget-lightbox-inner" @click.stop="">' + '<div class="pretix-widget-lightbox-inner" @click.stop="">'
+ '<figure class="pretix-widget-lightbox-image">' + '<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>' + '<figcaption v-if="$root.lightbox.description">{{$root.lightbox.description}}</figcaption>'
+ '</figure>' + '</figure>'
+ '<button type="button" class="pretix-widget-lightbox-close" @click="lightboxClose" aria-label="'+strings.close+'">' + '<button type="button" class="pretix-widget-lightbox-close" @click="lightboxClose" aria-label="'+strings.close+'">'
@@ -1947,6 +1947,10 @@ var shared_root_computed = {
return target; return target;
}, },
useIframe: function () { 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()); return !this.disable_iframe && (this.skip_ssl || site_is_secure());
}, },
showPrices: function () { showPrices: function () {