Mam skrypt, który wstawia zawartość do elementu za pomocą innerHTML
.
Może to być na przykład:
<script type="text/javascript">alert('test');</script>
<strong>test</strong>
Problem polega na tym, że kod wewnątrz <script>
tagu nie jest wykonywany. Trochę googlowałem, ale nie było żadnych widocznych rozwiązań. Jeśli wstawiłem zawartość za pomocą jQuery, $(element).append(content);
części skryptu otrzymałyby eval
przed wstrzyknięciem do DOM.
Czy ktoś ma fragment kodu, który wykonuje wszystkie <script>
elementy? Kod jQuery był nieco skomplikowany, więc nie mogłem zrozumieć, jak to zostało zrobione.
Edycja :
Zaglądając do kodu jQuery udało mi się dowiedzieć, jak jQuery to robi, co zaowocowało następującym kodem:
Demo:
<div id="element"></div>
<script type="text/javascript">
function insertAndExecute(id, text)
{
domelement = document.getElementById(id);
domelement.innerHTML = text;
var scripts = [];
ret = domelement.childNodes;
for ( var i = 0; ret[i]; i++ ) {
if ( scripts && nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {
scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );
}
}
for(script in scripts)
{
evalScript(scripts[script]);
}
}
function nodeName( elem, name ) {
return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();
}
function evalScript( elem ) {
data = ( elem.text || elem.textContent || elem.innerHTML || "" );
var head = document.getElementsByTagName("head")[0] || document.documentElement,
script = document.createElement("script");
script.type = "text/javascript";
script.appendChild( document.createTextNode( data ) );
head.insertBefore( script, head.firstChild );
head.removeChild( script );
if ( elem.parentNode ) {
elem.parentNode.removeChild( elem );
}
}
insertAndExecute("element", "<scri"+"pt type='text/javascript'>document.write('This text should appear as well.')</scr"+"ipt><strong>this text should also be inserted.</strong>");
</script>
javascript
dom
eval
innerhtml
phidah
źródło
źródło
function testFunction(){ alert('test'); }
do kodu wstawionego do innerHTML, a następnie spróbuję ją wywołać, oznacza to, że funkcja nie jest zdefiniowana.Odpowiedzi:
Skrypt programu operacyjnego nie działa w IE 7. Z pomocą SO, oto skrypt, który robi:
źródło
$(parent).html(code)
- zobacz moją odpowiedź poniżej.if (nodeName(child, "script" ) && (!child.type || child.type.toLowerCase() === "text/javascript")) { scripts.push(child); } else { exec_body_scripts(child); }
elem.src
i warunkowo ustawiałsrc
właściwość utworzonego elementu skryptu zamiast ustawiania jego zawartości tekstowej.eval
sztuczki zamiast tworzyć<script>
element i wstawiać go do pliku<head>
? Obaj wykonują kod JS bez ujawniania bieżącego zamknięcia.@phidah ... Oto bardzo interesujące rozwiązanie Twojego problemu: http://24ways.org/2005/have-your-dom-and-script-it-too
Więc zamiast tego wyglądałoby to tak:
<img src="empty.gif" onload="alert('test');this.parentNode.removeChild(this);" />
źródło
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onload="alert('test');">
jeśli chcesz zapobiec bezużytecznemu żądaniu http.style="display:none;
) aby ukryć ikonę zepsutego obrazu<style>
jest lepszy niż<img>
, ponieważ nieOto krótszy, wydajniejszy skrypt, który działa również w przypadku skryptów z tą
src
właściwością:Uwaga: chociaż
eval
może powodować lukę w zabezpieczeniach, jeśli nie jest używany prawidłowo, jest znacznie szybszy niż tworzenie tagu skryptu w locie.źródło
eval
został zaprojektowany, aby skrzywdzić użytkowników. Każde dynamiczne wykonanie skryptu jest ryzykiem i dlatego CSP wywołuje je,'unsafe-eval'
ponieważ tak jest. Naruszasz także bezpieczeństwo swoich witryn, jeśli używasz ich w bibliotece, ponieważ nie mogą jej wyłączyć.src
właściwością zostaną pobrane asynchronicznie i wykonane w momencie nadejścia. Kolejność nie jest zachowywana. Skrypty wbudowane będą również wykonywane poza kolejnością, synchronicznie przed skryptami asynchronicznymi.Nie należy używać właściwości innerHTML, ale raczej metody appendChild węzła: węzła w drzewie dokumentów [HTML DOM]. W ten sposób możesz później wywołać wstrzyknięty kod.
Upewnij się, że rozumiesz, że
node.innerHTML
to nie to samo conode.appendChild
. Możesz poświęcić trochę czasu na dokumentację klienta JavaScript, aby uzyskać więcej informacji i model DOM. Mam nadzieję, że poniższe wskazówki pomogą ...Wstrzykiwanie próbek działa:
pozdrowienia,
źródło
try this, look how clever I am
odpowiedzi. Zasługuje na UV, dostał moje.var _in = document.getElementById(inject);
, Myślę.Uproszczona wersja ES6 odpowiedzi @ joshcomley z przykładem.
Bez JQuery, bez biblioteki, bez ewaluacji, bez zmiany DOM, po prostu czysty Javascript.
http://plnkr.co/edit/MMegiu?p=preview
Stosowanie
źródło
setInnerHtml
nie jestsetInnerHTML
setInnerHTML
ale jest wywoływanasetInnerHtml
z wnętrzarunB
funkcji. Dlatego przykład nie działaWypróbuj ten fragment:
źródło
W moim projekcie działa w Chrome
źródło
Rozwiązanie bez użycia „eval”:
To zasadniczo klonuje tag script, a następnie zastępuje zablokowany tag script nowym, co pozwala na wykonanie.
źródło
scriptNode.innerHTML = code
nie działa dla IE. Jedyną rzeczą do zrobienia jest wymianascriptNode.text = code
i działa dobrzeźródło
Łatwiej jest używać jquery
$(parent).html(code)
zamiastparent.innerHTML = code
:Działa to również ze skryptami, które używają
document.write
i skryptami ładowanymi za pośrednictwemsrc
atrybutu. Niestety nawet to nie działa ze skryptami Google AdSense.źródło
Po prostu zrób:
źródło
Możesz rzucić okiem na ten post . Kod może wyglądać następująco:
źródło
Dzięki skryptowi Larry'ego, który działał doskonale w IE10, użyłem tego:
źródło
Rozciągając się od Larry'ego. Zrobiłem to rekurencyjnie przeszukując cały blok i węzły potomne.
Skrypt będzie teraz wywoływał również zewnętrzne skrypty, które są określone parametrem src. Skrypty są dołączane do głowy zamiast wstawiać i umieszczane w kolejności, w jakiej zostały znalezione. Tak więc specjalnie zachowane są skrypty zamówień. Każdy skrypt jest wykonywany synchronicznie, podobnie jak przeglądarka obsługuje początkowe ładowanie DOM. Więc jeśli masz blok skryptu, który wywołuje jQuery z CDN, a następny węzeł skryptu używa jQuery ... Nie ma sprawy! Aha i oznaczyłem dołączone skrypty identyfikatorem serializowanym na podstawie tego, co ustawiłeś w parametrze tagu, abyś mógł znaleźć, co zostało dodane przez ten skrypt.
źródło
Spróbuj tego, działa u mnie w Chrome, Safari i Firefox:
Należy jednak pamiętać, że następujący skrypt zagnieżdżony div NIE będzie działać:
Aby skrypt mógł zostać uruchomiony, musi zostać utworzony jako węzeł, a następnie dołączony jako element podrzędny. Możesz nawet dołączyć skrypt do wcześniej wstawionego div i będzie on działał (napotkałem to wcześniej, próbując uruchomić kod serwera reklam):
źródło
Poszerzam odpowiedź Lambdera
Możesz użyć obrazu base64, aby utworzyć i załadować swój skrypt
Lub jeśli masz
Iframe
, możesz go użyć zamiast tegoźródło
Potrzebowałem czegoś podobnego, ale potrzebowałem, aby skrypt pozostał lub został ponownie utworzony w tym samym miejscu, co oryginalny skrypt, ponieważ mój skrypt jest ukierunkowany na lokalizację tagu skryptu w DOM, aby tworzyć / kierować elementy. Stworzyłem również skrypt rekurencyjny, aby upewnić się, że będzie działał również, jeśli jest o więcej niż jeden poziom niższy.
UWAGA: używam
const
tutaj, jeśli masz starszą przeglądarkę, po prostu użyjvar
.źródło
Stworzyłem tę nową funkcję pomocnika w TypeScript, może ktoś to doceni. Jeśli usuniesz deklarację typu z parametru skryptu, będzie to zwykły JS.
źródło
Wypróbuj funkcję eval ().
To prawdziwy przykład z projektu, który rozwijam. Dzięki temu wpisowi
źródło
Oto moje rozwiązanie w ostatnim projekcie.
źródło