Angular restricts the use of the svg namespace in the $sce service for security reasons

I have a project in Angular Material where I am using an md-icon with a specific svg structure:

<md-icon class="ic1" md-svg-src='data:image/svg+xml,
  <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <ellipse ry="16" rx="16" id="svg_1" cy="16" cx="16" stroke-width="1.5" fill="#ff0000"/>                                    
  </svg>' class="s32">
</md-icon>

However, Angular is blocking the call to https://www.w3.org/2000/svg (both HTTP and HTTPS) which results in a $sce:insecurl error:

https://i.stack.imgur.com/vGFde.png

I followed the documentation and tried adding the URL to the SCE whitelist like this:

app.config(function ($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist(['self', 'https://www.w3.org/2000/svg', 'https://*.w3.org/**'])
})

Unfortunately, this step did not solve the issue.

Can someone please guide me on how to resolve this problem?

Note that the HTML provided here is simplified; in reality, I dynamically change the fill color of the SVG based on a variable. So, if possible, I would prefer not to save each SVG as a separate file but rather make this dynamic version work.

javascriptangularjssvgangularjs-material

Answer №1

It seems like the SVG string is being generated dynamically rather than hardcoded. If that's the case, you should be able to change the fill color easily.

For example:

 md-svg-src='{{generateIcon()}} ...

Am I correct in understanding this?

If so, have you considered Base64 encoding the SVG?

generateIcon() {
  svgStr = "whatever";
  return "data:image/svg+xml;base64," + base64(svgStr);
}

There may be a more Angular-friendly solution for this issue. However, using Base64 encoding could serve as a temporary workaround.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Getting around CloudFlare's 100-second time-out restriction

Seeking a solution to AJAX-enable my reports and circumvent the 100-second time-out constraint enforced by CloudFlare for requests passing through its platform. For more information, visit Is it possible to increase CloudFlare time-out? The implementatio ...

javascriptajaxasynchronoustimeoutcloudflare

Is it feasible to display a message for a certain duration without using the alert() function upon clicking a button?

I'm working on a NEXT.JS project and I need to display a <p> element under my button for a specific duration before it disappears. I don't want to use the alert() function. Any suggestions on how to achieve this? ...

javascripthtmlcss

In Javascript, assign default values to an array and update them with new values upon the click of a

My goal is to create a quiz that populates an array. Initially, the quiz is empty but I aim to assign it a default value. This serves as my question navigation: /** * * @param {int} question * @returns {QuizPart} ...

javascriptarraysif-statementvariables

JavaScript file slicing leads to generating an empty blob

I am currently working on a web-based chunked file uploader. The file is opened using the <input type="file" id="fileSelector" /> element, and the following simplified code snippet is used: $('#fileSelector').on('change', functio ...

javascripthtmlchunking

Mastering the art of using componentWillUnmount() in ReactJs

According to the official tutorial: componentWillUnmount() is called right before a component is removed and destroyed. It's used for any necessary cleanup tasks like stopping timers, cancelling network requests, or cleaning up DOM elements that we ...

javascriptreactjs

Set values for all variables that begin with a specific string

[WARNING! Proceed with caution] One of my most recent coding dilemmas involves creating a JavaScript script that can identify specific surveys. These surveys use variables that share a common string followed by a random number, like this: variableName_46 ...

javascriptvariablesfindglobalassign

Plugin refresh after callback

I have a webpage that features a row of buttons at the top, followed by some content below. Whenever one of the buttons is clicked, the content is updated using UpdatePanels. Within this content, I am attempting to incorporate the royal slider plugin, wh ...

c#javascriptjqueryasp.netupdatepanel

How can I modify this section of the code in Google Script to retrieve all columns?

My question is, how can I modify this code to fetch all columns from the array instead of just [0,1,2,3] Here is the line of code in question: const new_table = [0,1,2,3].map(x => make_row_from_col(this_table, x)).join('\n'); Using obje ...

javascriptarraysgoogle-apps-script

The function cannot be called because the type does not have the appropriate signature for invoking. The specific type lacks compatible call signatures, as indicated

Encountering an issue while attempting to utilize a getter and setter in my service, resulting in the following error message: Cannot invoke an expression whose type lacks a call signature. Type 'Boolean' has no compatible call signatures 2349 t ...

javascripttypescriptrxjs

Switching left navigation in material-ui when the user interacts within the application boundary

I am currently implementing a toggle feature in my AppBar to display the LeftNav. I have successfully set it up to close when the toggle is clicked again. However, I wish to mimic the behavior of most left nav bars where clicking anywhere outside of the ...

javascriptreactjsmaterial-ui

Inconsistent rendering issue identified in AngularJS when updating arrays with ui-router

I'm leveraging ui-router to navigate to specific subpages in my application: var myApp = angular.module("myApp",['ui.router']); myApp.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('usergroups&apos ...

javascriptangularjs

Troubleshooting PHP/MySQL integration with Google Maps - issues persist

I have come across several other posts on this theme but unfortunately, none of them have been able to help me. I am using the article https://developers.google.com/maps/articles/phpsqlajax_v3, however, the code provided is not working for me. I have a fil ...

javascriptphp

Having trouble connecting to my MongoDB container using Node.js

I am facing an issue while trying to connect my local mongoDB docker, named "some-mongo", to my NodeJS backend server running on the same computer. The problem arises when attempting to establish the connection using the "mongoose" module. To launch my mo ...

javascriptnode.jsmongodbdockermongoose

A guide on looping through an array enclosed within an object with the help of ng-repeat

I am trying to retrieve data from an API endpoint that returns a single object. Within this object, there is an array called video which I want to iterate over and display all the links stored in the array on the view. The JSON object returned by the API: ...

javascriptangularjsarraysangularjs-ng-repeat

Revamping MapReduce in MongoDB Version 2.4

After upgrading to MongoDB 2.4, I encountered an issue with a map function that uses db, as mentioned in the release notes. The release notes suggest refactoring, but I am unsure about the best approach to take. The part of the function that is no longer ...

javascriptmongodb

Executing javascript whenever a page is updated

Looking for a solution to ensure that my userscript runs every time an AJAX call modifies any page it is attached to. Is there a way to listen for XMLHttpRequests and trigger the script accordingly? ...

javascriptjqueryxmlhttprequestuserscripts

Disable the ability to click on the indicators in the Bootstrap carousel

Seeking assistance with customizing tweeters bootstrap Carousel functionality. I have removed the controls and now want to switch slides according to my own logic while displaying slide indicators. How can this be achieved? Preferably seeking a solution ...

javascriptangularjstwitter-bootstrap-3

Mongoose JS is unable to display the query value in the output

Is there a way to use mongoose js to create a collection of kittens with specific attributes like {name: "mike"}? Once this document is created, I need to be able to view its value. I've attempted to write the following code: However, I've enco ...

javascriptnode.jsmongodbmongoose

Encountering a 404 error when typing a link and refreshing the page in Laravel combined with VueJS

I encountered an issue while working on a Laravel VueJS application for our Proof of Concept (POC). I have integrated vue-router into the project and it is functional. However, whenever I attempt to navigate to a specific page defined in the routes of app. ...

javascriptphplaravelvue.js

Retrieving a component's property within its event handler in React

In the React component, there is a need to create multiple instances with different key values passed as arguments to the onClick event handler. However, the issue arises when using a variable such as 'value' in a for loop, as it ends up taking t ...

javascriptreactjsreact-props