Problem loading svg files from s3

[Ballpin]

Hi, Im getting a error when django tries to load icons.svg from aws s3. The error i get is "Unsafe attempt to load URL from frame with URL . Domains, protocols and ports must match."

Its trying to load from https://bucket_name.s3.amazonaws.com/static/djangocms_bootstrap4/sprites/icons.svg any idea why?

[vxsx]

icons.svg are used to display the icons in the admin ui of the plugin. plugin assumes it must load them from the location of static files. to figure out the location it uses this: https://github.com/divio/djangocms-bootstrap4/blob/master/djangocms_bootstrap4/templates/djangocms_bootstrap4/admin/base.html#L12

could you check what the value of static prefix is for you? it looks like for some reason it's http based, while the site itself is https

[mammuth]

The issue is that the sprites are added via a <use> tag which will be blocked by CSP if the domains don't match I think (related discussion on chromium bug tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=470601).

https://github.com/divio/djangocms-bootstrap4/blob/efa653e597cabea56b8236fe8d920761611b9b56/private/js/components/grid-layout.js#L33-L35

So two possible solutions I can come up with:

• Find a way which doesn't need to use use
• Request icons.svg via XMLHttpRequests and inject it in the DOM

It's something which needs to be fixed in this package I'm afraid.

For the sake of completeness, that's how an admin view looks like without the icons - some settings like alignments are sadly not usable by editors:

[Ballpin]

I have kept searching for a solution for this.

A lot of people say to have similar issues with SVG files in Amazon. The suggestion that keeps coming for me is to change the svg to inline instead of using the "use" tag. With inline there wont be any need to retrieve that svg file through a request. The inline should be handled by Webpack.

I will give it a try, if it works i will make PR. :-)

Thanks @mammuth for sucha detailed describition of the problem. I need to be better at that :D

[pierreben]

Hello ! Any news regarding this issue ?

[FinalAngel]

@pierreben we'd welcome any pull request addressing the issue.

[bplociennik]

@Ballpin did you have occasion to check a solution when we use inline instead use tag?

[Ballpin]

@vThaian Sorry for the late response. Not yet, i will give it a look as soon as i can. I have been busy with several projects at the same time. I will have a look in the upcoming weeks.

[corentinbettiol]

The problem here is that loading svg from different (sub)domain is forbidden.

Here's the bug report on chromium, the issue on w3c's svg project, and the draft) (they are "waiting on someone to sit down and write a proposal").

As a temporary fix I think we can add the svg shapes directly in the css, using the background-image property:

    .icon-align-reset {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 2.667c-7.36 0-13.333 5.973-13.333 13.333s5.973 13.333 13.333 13.333 13.333-5.973 13.333-13.333-5.973-13.333-13.333-13.333zM5.333 16c0-5.893 4.773-10.667 10.667-10.667 2.467 0 4.733 0.84 6.533 2.253l-14.947 14.947c-1.413-1.8-2.253-4.067-2.253-6.533zM16 26.667c-2.467 0-4.733-0.84-6.533-2.253l14.947-14.947c1.413 1.8 2.253 4.067 2.253 6.533 0 5.893-4.773 10.667-10.667 10.667z"></path></svg>');
    }

If you're okay I will create a new PR soon with theses modifications (I'll leave the svg files since there might be a chance that this workaround will be no longer needed soon).

[corentinbettiol]

we'd welcome any pull request addressing the issue.

@FinalAngel Hi, could you please take a look at the solution I'm suggesting?

[kapt]

@FinalAngel Hi, is it possible to accept this MR ?