Content-Security-Policy and inline styles

[tonyschwartz]

Content-Security-Policy and inline styles

[tonyschwartz]

I was using this: https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js
per the install instructions found on https://sweetalert2.github.io/. See download & install section. It says, "Or grab from jsDelivr CDN". If you follow that, you see:

<script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js "></script>

I'm sorry, I don't know the difference yet between sweetalert2.js and sweetalert2.all.js

I guess that's what you're saying when you say the all has the styles built in. The regular js needs the styles deployed separately.

I'm sorry for burning your time on that. I see that is described in the documentation. Just didn't catch it and wasn't clear to me.

Thank you for your help,

Tony

[limonte]

The library is shipped in both styled and unstyled variants.

The unstyled one isn't using inline styles, here's how to use it:

import Swal from 'sweetalert2/dist/sweetalert2.js'

And of course you'd need to include Swal styles separately for example using the link tag:

<link rel="stylesheet" href="sweetalert2.min.css">

or by including it in your styles:

import 'sweetalert2/src/sweetalert2.scss'

Read more: https://sweetalert2.github.io/#usage

[tonyschwartz]

Perhaps this is not the place for this conversation, but the latest code does still fail. The second line shown here (which is from the minified .js) fails at appendChild. And line 7 as well. I'm sure I may be doing something wrong and have missed a step, but I don't think so. I ran into this while upgrading sweetalert2. A previous version does not exhibit this problem. v11.7.32

var n = e.createElement("style");
if (e.getElementsByTagName("head")[0].appendChild(n),
n.styleSheet)
    n.styleSheet.disabled || (n.styleSheet.cssText = t);
else
    try {
        n.innerHTML = t
    } catch (e) {
        n.innerText = t
    }

[limonte]

v11.10.6 doesn't have any e.createElement("style"):

https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.js

double-check that you're importing from sweetalert2/dist/sweetalert2.js