ThoughtSpot For Developers•2mo ago

TomerLand - Hey, I want to customize some icons...

Hey, I want to customize some icons in the embedded app, spotter for example I set up the svg in the following public address https://myhost.com/my-icon.svg I added https://myhost.com in CSP connect-src domains and CSP img-src domains rules I added the following link in the sprite config const iconSpriteUrl = 'https://myhost.com/my-icon.svg'; now, when I load the embedded component, I’m getting

request-interceptor.ts:24 Fetch API cannot load https://myhost.com/my-icon.svg. Refused to connect because it violates the document's Content Security Policy.

any ideas how to debug that?

Solution:

Jump to solution

8 Replies

TomerLandOP•2mo ago

this is the svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<symbol id="rd-icon-spotter" viewBox="0 0 48 48" fill="black">
    <g fill="none" stroke="currentColor"><path d="m8.875 17.464-3.133 1.709c-.184.1-.35.223-.503.358A10.45 10.45 0 0 0 12 22c2.557 0 4.9-.915 6.722-2.434a2.8 2.8 0 0 0-.553-.37l-3.355-1.678a1.28 1.28 0 0 1-.707-1.144v-1.316q.143-.164.318-.408a7.7 7.7 0 0 0 1.042-2.102c.43-.133.748-.53.748-1.002V10.14c0-.31-.138-.586-.351-.78V7.33S16.28 4.17 12 4.17 8.137 7.33 8.137 7.33v2.03c-.214.194-.35.47-.35.78v1.405c0 .37.194.695.485.884a7 7 0 0 0 1.27 2.628v1.283c0 .468-.256.899-.667 1.123Z"/><path d="M12.18 1.002C6.381.902 1.6 5.522 1.501 11.32a10.47 10.47 0 0 0 3.742 8.208 2.8 2.8 0 0 1 .498-.355l3.133-1.709a1.28 1.28 0 0 0 .666-1.123v-1.284s-.92-1.1-1.27-2.628a1.05 1.05 0 0 1-.486-.884V10.14c0-.309.138-.585.351-.778V7.33S7.72 4.17 12 4.17s3.863 3.16 3.863 3.16v2.032c.214.193.35.47.35.778v1.405c0 .472-.316.87-.746 1.003a7.7 7.7 0 0 1-1.043 2.101 5 5 0 0 1-.318.408v1.317c0 .484.274.928.708 1.144l3.354 1.677c.202.1.384.228.551.37a10.47 10.47 0 0 0 3.779-7.886c.1-5.798-4.52-10.578-10.319-10.677Z"/></g>

    </symbol>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<symbol id="rd-icon-spotter" viewBox="0 0 48 48" fill="black">
    <g fill="none" stroke="currentColor"><path d="m8.875 17.464-3.133 1.709c-.184.1-.35.223-.503.358A10.45 10.45 0 0 0 12 22c2.557 0 4.9-.915 6.722-2.434a2.8 2.8 0 0 0-.553-.37l-3.355-1.678a1.28 1.28 0 0 1-.707-1.144v-1.316q.143-.164.318-.408a7.7 7.7 0 0 0 1.042-2.102c.43-.133.748-.53.748-1.002V10.14c0-.31-.138-.586-.351-.78V7.33S16.28 4.17 12 4.17 8.137 7.33 8.137 7.33v2.03c-.214.194-.35.47-.35.78v1.405c0 .37.194.695.485.884a7 7 0 0 0 1.27 2.628v1.283c0 .468-.256.899-.667 1.123Z"/><path d="M12.18 1.002C6.381.902 1.6 5.522 1.501 11.32a10.47 10.47 0 0 0 3.742 8.208 2.8 2.8 0 0 1 .498-.355l3.133-1.709a1.28 1.28 0 0 0 .666-1.123v-1.284s-.92-1.1-1.27-2.628a1.05 1.05 0 0 1-.486-.884V10.14c0-.309.138-.585.351-.778V7.33S7.72 4.17 12 4.17s3.863 3.16 3.863 3.16v2.032c.214.193.35.47.35.778v1.405c0 .472-.316.87-.746 1.003a7.7 7.7 0 0 1-1.043 2.101 5 5 0 0 1-.318.408v1.317c0 .484.274.928.708 1.144l3.354 1.677c.202.1.384.228.551.37a10.47 10.47 0 0 0 3.779-7.886c.1-5.798-4.52-10.578-10.319-10.677Z"/></g>

    </symbol>
</svg>

shikharTS•2mo ago

Can you also add it in CSP visual embed hosts?

TomerLandOP•2mo ago

I'll try that and let you know It is already configured in the CSP visual embed hosts

shikharTS•2mo ago

@yuichirio_ha can you help here?

ashish•2mo ago

@TomerLand can you post a screenshot of the error? It generally also complains about what in CSP is in violation.

TomerLandOP•2mo ago

sure, let me get that

TomerLandOP•2mo ago

this is the relevant error for the svg

Solution

yuichirio_ha•2mo ago

Hey @TomerLand , I suppose your dev.dev.env0 - server hosting the SVG accepting requests from the insights.env0.com - Please check this. ( basically hitting the CORS here ) I hope you have whitelisted everything according to docs. If nothing works test it once with - Add the svg on github - get the jsdeliver url for the svg and try it out. Otherwise let's quick connect if nothing works out of the above.

Gaming

Programming

TomerLand - Hey, I want to customize some icons...

Did you find this page helpful?