Estoy tratando de establecer colores y estilos CSS que se obtienen desde un punto final API a elementos HTML.
He sido capaz de lograr esto, pero siento que no es la mejor práctica.
Esto es lo que tengo. ¿Alguna sugerencia para lograr esto de una manera más profesional?
mi archivo .ts :
getColors(){ this.api.get("http://127.0.0.1:8000/colors").subscribe((res:any)=>{ this.colors = res.color console.log(res) document.documentElement.style.setProperty("--primary", this.colors) }) } y archivo .html :
<header class="header"> <div class="headerdiv"> <h1>Welcome to Overflow</h1> </div> </header> <style> .header{ background-color: var(--primary); } h3, h1{ color: var(--h3color); } </style>No debe inyectar CSS ni ningún código a través del punto final.
Cargar CSS es problemático. Estás haciendo que tu aplicación sea muy vulnerable a la inyección de código.
Consulte Temas como Inyección de CSS: ¿qué es lo peor que puede pasar?
Le sugiero que reconsidere que se acerque y cargue el color desde dentro de la aplicación. Como obtener una identificación de la API que se traduce en un color. De esa manera, puede controlar el color desde el exterior sin inyectar código malicioso potencial.