ThoughtSpot For Developers•3w 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•3w 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•3w ago

Can you also add it in CSP visual embed hosts?

TomerLandOP•3w ago

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

shikharTS•3w ago

@yuichirio_ha can you help here?

ashish•3w ago

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

TomerLandOP•3w ago

sure, let me get that

TomerLandOP•3w ago

this is the relevant error for the svg

Solution

yuichirio_ha•3w 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?