Vraag Voorkomen dat bestaande CSS geïnjecteerde HTML / CSS in model brengt


Ik werk aan een project dat JS + CSS + HTML injecteert via webpagina's waar ik geen controle over heb.

Ik maak me zorgen over de hostpagina waarop mijn geïnjecteerde code wordt gestileerd. Ik wil dat mijn ingespoten code alleen gehoorzaamt mijn styling, en niet die van hen.

Op dit moment is de enige methode om dit te doen die ik kan bedenken, het expliciet specificeren van elke mogelijke tag voor de container <div>klasse (met behulp van vooraf gedefinieerde, bekende standaardinstellingen van de browser) en gebruik makend van overerving voor die regels om door te gaan naar de rest van mijn geïnjecteerde HTML. Deze CSS moet onderaan de pagina's worden weergegeven <head> label.

Ik denk echter niet dat dit de beste oplossing is, en ik kijk er niet naar uit om het te implementeren. Er zijn toch betere manieren.


15
2018-04-09 04:07


oorsprong


antwoorden:


Anderen hebben zeer goede manieren voorgesteld om te voorkomen dat uw CSS de pagina's beïnvloedt, en ervoor te zorgen dat uw CSS voorrang krijgt, maar u lijkt zich het meest zorgen te maken dat de CSS van de pagina u beïnvloedt, dat wil zeggen een funky, onverwachte stijl toevoegt (zoals het maken van alle div's hebben een roze achtergrond).

De enige manier waarop ik kan bedenken dat je zou kunnen voorkomen dat hun styling invloed heeft op je geïnjecteerde code, is dat je kunt sandboxen wat je hebt geïnjecteerd, zoals in een iframe. Anders zijn er gewoon te veel dingen die je zou moeten definiëren - je zou elke stijl moeten definiëren (padding, border, margin, background... de lijst gaat maar door) op de "*"selector (of beter nog,"#yourid *", dus u overschrijft gewoon uw eigen inhoud), gewoon zodat u absolute controle over uw CSS kunt garanderen.

Bewerken: ik realiseer me dat de laatste oplossing niet per se te pijnlijk is, als je de omni-selector gebruikt om alles naar een baseline te resetten:

#myid * {
    somestyle1: default;
    somestyle2: default;
    ... 
}

Ik heb gevonden iemand die zo'n oplossing heeft geschreven. Als u ver genoeg op de pagina naar beneden scrolt, ziet u het (van SuzyUK). Het ziet er niet compleet uit, maar is zeker een goede start.

(Ik zou ook graag willen weten of er een goede manier is om dit te voorkomen. Ik heb eerder Greasemonkey-scripts geschreven die code op de pagina injecteerden en ik moest CSS schrijven om de CSS van de pagina te overschrijven, maar in die gevallen heb ik wist wie mijn doelwit was en kon mijn CSS direct naar de pagina aanpassen.)


12
2018-04-09 04:17



Verpak uw geïnjecteerde HTML met een specifiek geklasseerde <div>, zoals

<div class="my-super-specialized-unique-wrapper"><!--contents--></div>

Voeg vervolgens in uw CSS alle regels toe met .my-super-specialized-unique-wrapper en gebruiken !belangrijk op elke regel. Dit zal de browser van de client instrueren om uw regel als oppermachtig te behandelen voor alle elementen die overeenkomen, ongeacht eventuele andere stijlen die ze kunnen targeten - zelfs als andere regels buiten uw controle meer specifiek zijn.


3
2018-04-09 04:12



Waarom injecteer je geen HTML-elementen met inline-opmaak zoals dit:

<p style="color:red">This to be injected</p>

Inline-styling heeft voorrang boven elke andere regel en u maakt de markering al om deze in te voegen.

Andere oplossing zou zijn om te gebruiken heel specefiek DOM-id's op uw elementen en vervolgens opmaken op uw toegevoegde CSS


1
2018-04-09 04:14



Je zult gewoon heel erg moeten zijn specifiek met je CSS selectors. Dat is veel specifieker dan de CSS-regels van de hostpagina. Misschien wilt u ook een soort algemene CSS-reset toevoegen die is aangepast om alleen uw HTML opnieuw in te stellen. Daarmee bedoel ik iets dat alle kleuren, achtergronden, lettertypen, opvulling enz. Terugzet naar één enkele standaard. Van daaruit kunt u uw eigen stijlen opbouwen.


1
2018-04-09 04:12



Als u een Mozilla-browser gebruikt, kunt u daadwerkelijk (indien illegaal) zichtbare DOM-inhoud toevoegen aan het <html> -element buiten het <body> -element. Hiermee voorkomt u stijlen die overeenkomen op het hoofdgedeelte en die worden overgenomen door uw inhoud. Het is mogelijk dat sommige stijlen overeenkomen op html, wat deze techniek zou verslaan, maar ik vond het nuttig.

bv. met jQuery: $ ('html'). toevoegen ('<div id = "mycontent"> blah blah blah </ div>');

Het gebruik van een populaire bibliotheek is op zichzelf een uitdaging wanneer u niet wilt dat uw instantie van de bibliotheek het gebruik van de bibliotheek beïnvloedt die wordt gedefinieerd door de pagina's die u wijzigt. Greasemonkey's '@require' werkte niet voor mij. Ik vond het nodig (maar mogelijk!) Om bestaande waarden van de twee of drie globale namen die door het jQuery-script zijn toegewezen op te slaan, mijn exemplaar van de bibliotheek in de DOM in te voegen, te wachten tot deze is geladen (een timer moest gebruiken, dat is vervelend, maar ik zie er geen manier om), cache de waarden die zijn toegewezen aan de globals in mijn eigen naamruimte voor mijn eigen gebruik en herstel de opgeslagen.


0
2018-04-23 06:57



Ik weet niet zeker hoe het moet worden gebruikt, van de browser-ondersteuning hiervoor, maar het is een van de belangrijkste oorzaken om te gebruiken http://www.w3.org/TR/shadow-dom/

Het idee is dat u een webcomponent kunt invoegen, die volledig kan worden gestyled en specifieke gebeurtenissen kan hebben die alleen de schaduw-DOM beïnvloeden (zodat uw module de rest van de pagina niet zal beïnvloeden).


0
2018-05-03 21:38