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

Error: excessive recursion detected in <div ng-view="" class="ng-scope">

I've recently started learning angularJS and I've encountered an error that I need help with. Below is my index.html file: <body ng-app="myApp"> <div ng-view></div> <a href="table">click</a> <script ...

javascriptangularjsangularjs-ng-route

Issue: Encounter of "Uncaught (in promise) TypeError" while implementing RiveScript chatbot in Angular

I've been working on integrating a chatbot based on RiveScript into Angular. The chatbot is functioning well - I always see the correct response in the console. Displaying the user's input is also working seamlessly. However, I'm encounterin ...

javascriptangulartypescriptchatbotrivescript

Send the Vue component as an argument to the function

Currently, I am in the process of transferring a project to Vue and utilizing Muuri as a layout manager. In my code, I have the following snippet: grid.add(itemElem, { layout: false, active: false }); The variable itemElem used to be an HTML element c ...

javascriptvue.js

The attempt to remove a cookie through a Next.js server-side operation was unsuccessful

Having trouble removing a cookie using the next/headers module in my Next.js application. The code snippet below is what I've tried: import {cookies} from "next/headers"; export default async function Signout() { async function deleteTok ...

javascriptreactjscookiesnext.jsnext.js13

Issues with AngularJS ng-class not functioning correctly with conditions

I am struggling with a simple task - I can't seem to change the designated class. My main objective is to confirm whether or not the date follows the correct format (DD-MMM-YYYY hh:mm:ss). <input type="text" style="width : 80%" ng-model="startTim ...

angularjsng-class

Adding routes dynamically in nodeJS using Express is a powerful way to manage your server

Is there a way to dynamically add paths to nodeJS within a running program? Instead of relying on kludged solutions like resetting the server when files change, I am looking for a more efficient method. Any suggestions? EDIT: This project is focused on pr ...

javascriptnode.jsexpress

Execute the identical script in NPM, but with various parameters each time

Recently, I created a nodeJS script with a parameter. Currently, using npm start allows me to pass arguments and run my script successfully. However, I'm now faced with the challenge of passing multiple arguments to npm start in order to run multipl ...

javascriptnode.jsnpm

Scrolling to an id element in Vue.js can be achieved by passing the ID in the URL using the "?" parameter. This

My challenge involves a URL http://localhost:8080/?london that needs to load directly to the element with an id of london in the HTML section <section id="london"> on the page. Using http://localhost:8080/#london is not an option, even though it woul ...

javascriptvue.jsanchor-scroll

How can I use Angular forEach to retrieve both the name of a JSON key and its corresponding

Is there a way to retrieve both the key name and value of a JSON object in Angular using the forEach method? var institute = { "courses": [], "user_type": 3, "institute_name": "sd", "tagline": "sd", "overview": "sd", ...

angularjsjson

Is there a more efficient method than creating a separate variable for the navbar on each individual page where it is being utilized?

Apologies for the unclear title, I struggled to find the right wording and decided it would be easier to illustrate with code. Let's assume I have the following routes: router.get('/chest', (req, res)=>res.render('muscles/chest/chest ...

javascriptnode.jsexpressejs

AngularJS directive for jQuery Handsontable is a powerful tool for creating interactive

I've been experimenting with using jQuery handsontable in conjunction with an angular directive, but I've encountered a strange issue. Whenever I type something into the cells, the characters appear outside of the table instead of inside it. Oddl ...

javascriptangularjshandsontable

Moving from $.ajax to $http in AngularJS can improve the performance and efficiency of your

For the purpose of testing (to utilize $httpBackend), I am looking to switch my Service from using jQuery $.ajax to Angular's $http. This is how my current service is structured: app.service('myService', function() { return { getUse ...

angularjsunit-testingjasmine

What is the best way to ensure the submenu is visible on every menu when the cursor hovers over it

I am currently working on implementing a drop-down menu using react.js. I have been following a tutorial but encountered an issue when trying to add a submenu to the menu items. Instead of the submenu appearing only for the specific menu item hovered over, ...

javascriptreactjsnavigationsubmenu

Implementing authentication middleware with React Router in a React component

Working on my app.js, I'm trying to implement an Auth component that acts as middleware to check if the user is logged in. const App = props => ( <BrowserRouter> <Provider store={store}> <div className="app"& ...

javascriptreactjsecmascript-6

Can someone please explain how to execute an "except" filter in Angular?

Consider a scenario where an Angular application allows users to borrow books from a library. The data model includes two arrays of Book entities, each with a unique ID and title field. One array represents all the books in the library, while the other con ...

angularjsangularjs-filter

Trouble with HTTPS request in Android fragment

My app crashes and returns to the main activity whenever I try to use the search function with the Kitsu API in my fragment. I have observed through Logcat that no data is being fetched, but I am unable to determine what is causing the crash.The LogCat r ...

javascriptjavaandroidjson

Eliminate repeated elements within a JSON dataset to create a consolidated array

Looking to extract unique data from the JSON object below in order to create a result json with a list of questions and their corresponding choices. Any assistance would be greatly appreciated. Thanks in advance..!! var data = [ { "category": "s ...

javascriptjson

The property of undefined map cannot be read

import React from 'react'; import { Card, Text } from "react-native-paper"; import { SafeAreaView, } from "react-native"; class HackerNewsClone extends React.Component { constructor(props) { super(props); this.sta ...

javascriptarraysreactjsreact-nativeapi

Creating a default homepage across various HTML files using Google Apps Script and deploying it as a WebApp

Is there a way to set a default main page on multiple HTML and GS files in Google AppScript? I plan to publish it as a Web App. Have you attempted using the doGet function? ...

javascripthtmlcssgoogle-apps-script

Using Angular and Laravel to display JSON data extracted from a MySQL database

I am currently retrieving data from MySQL using Laravel query builder, converting it to JSON format as per the suggestion of W3schools. However, when trying to display the fetched data using AngularJS, I end up with a blank page. Laravel route Route::ge ...

phpmysqlangularjslaravellaravel-5