Przeczytałem samouczek dotyczący widgetów DIY - Jak osadzić swoją witrynę w innej witrynie dla widżetów XSS autorstwa Dr. Nic.
Szukam sposobu na przekazanie parametrów do tagu skryptu. Na przykład, aby wykonać następujące czynności:
<script src="http://path/to/widget.js?param_a=1&param_b=3"></script>
Czy jest na to sposób?
Dwa interesujące linki:
javascript
parameters
widget
xss
script-tag
Tomer Lichtash
źródło
źródło
Odpowiedzi:
Przepraszam za odpowiedź na bardzo stare pytanie, ale po spędzeniu godziny na zmaganiach z powyższymi rozwiązaniami zdecydowałem się na prostsze rzeczy.
<script src=".." one="1" two="2"></script>
Wewnątrz powyższego skryptu:
document.currentScript.getAttribute('one'); //1 document.currentScript.getAttribute('two'); //2
Znacznie łatwiejsze niż parsowanie jquery LUB adresu URL.
Możesz potrzebować pliku polyfil dla doucment.currentScript z odpowiedzi @Yared Rodriguez dla IE:
document.currentScript = document.currentScript || (function() { var scripts = document.getElementsByTagName('script'); return scripts[scripts.length - 1]; })();
źródło
src="..."
to ma oznaczać, DOWOLNE źródło, nie ma znaczenia :)Lepiej jest użyć funkcji w atrybutach danych html5 5
<script src="http://path.to/widget.js" data-width="200" data-height="200"> </script>
W pliku skryptu http://path.to/widget.js można uzyskać parametry w następujący sposób:
<script> function getSyncScriptParams() { var scripts = document.getElementsByTagName('script'); var lastScript = scripts[scripts.length-1]; var scriptName = lastScript; return { width : scriptName.getAttribute('data-width'), height : scriptName.getAttribute('data-height') }; } </script>
źródło
myAwesomeWigretNo2
czymyAwesomeWigretNo681
??? Jak mogę to naprawić, aby zaakceptować rzeczywistą zmienną?document.currentScript
(działa tylko dla skryptów, które nie znajdują się w ich własnym pliku) i umieszczenie znacznikaid
w<script>
tagu, a następnie znalezienie go przez to.Rozumiem. Coś w rodzaju włamania, ale działa całkiem nieźle:
var params = document.body.getElementsByTagName('script'); query = params[0].classList; var param_a = query[0]; var param_b = query[1]; var param_c = query[2];
Parametry w tagu script przekazuję jako klasy:
<script src="http://path.to/widget.js" class="2 5 4"></script>
Ten artykuł bardzo pomógł.
źródło
Innym sposobem jest użycie metatagów. Wszelkie dane, które mają zostać przesłane do twojego JavaScript, można przypisać w następujący sposób:
<meta name="yourdata" content="whatever" /> <meta name="moredata" content="more of this" />
Dane można następnie pobrać z metatagów w ten sposób (najlepiej zrobić to w module obsługi zdarzeń DOMContentLoaded):
var data1 = document.getElementsByName('yourdata')[0].content; var data2 = document.getElementsByName('moredata')[0].content;
Absolutnie bez kłopotów z jQuery lub podobnymi rozwiązaniami, bez hacków i obejść koniecznych i działa z każdą wersją HTML obsługującą metatagi ...
źródło
JQuery ma sposób na przekazywanie parametrów z HTML do javascript:
Umieść to w
myhtml.html
pliku:<!-- Import javascript --> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <!-- Invoke a different javascript file called subscript.js --> <script id="myscript" src="subscript.js" video_filename="foobar.mp4">/script>
W tym samym katalogu utwórz
subscript.js
plik i umieść go tam://Use jquery to look up the tag with the id of 'myscript' above. Get //the attribute called video_filename, stuff it into variable filename. var filename = $('#myscript').attr("video_filename"); //print filename out to screen. document.write(filename);
Wynik analizy:
Ładowanie strony myhtml.html ma wydruk „foobar.mp4” na ekranie. Zmienna o nazwie video_filename została przekazana z html do javascript. JavaScript wydrukował go na ekranie i pojawił się jako osadzony w html w rodzicu.
jsfiddle dowód, że powyższe działa:
http://jsfiddle.net/xqr77dLt/
źródło
Jeśli używasz jquery, możesz rozważyć ich metodę danych.
Użyłem czegoś podobnego do tego, co próbujesz w swojej odpowiedzi, ale w ten sposób:
<script src="http://path.to/widget.js" param_a = "2" param_b = "5" param_c = "4"> </script>
Możesz także utworzyć funkcję, która pozwoli ci bezpośrednio pobrać parametry GET (z tego często korzystam):
function $_GET(q,s) { s = s || window.location.search; var re = new RegExp('&'+q+'=([^&]*)','i'); return (s=s.replace(/^\?/,'&').match(re)) ? s=s[1] : s=''; } // Grab the GET param var param_a = $_GET('param_a');
źródło
to jest bardzo stary wątek, wiem, ale to też może pomóc, jeśli ktoś przyjdzie tutaj, gdy będzie szukać rozwiązania.
Zasadniczo użyłem document.currentScript, aby pobrać element, z którego działa mój kod, i filtruję, używając nazwy zmiennej, której szukam. Zrobiłem to rozszerzając currentScript za pomocą metody o nazwie "get", więc będziemy mogli pobrać wartość z tego skryptu za pomocą:
document.currentScript.get('get_variable_name');
W ten sposób możemy użyć standardowego URI do pobrania zmiennych bez dodawania specjalnych atrybutów.
To jest ostateczny kod
document.currentScript.get = function(variable) { if(variable=(new RegExp('[?&]'+encodeURIComponent(variable)+'=([^&]*)')).exec(this.src)) return decodeURIComponent(variable[1]); };
Zapomniałem o IE :) Nie mogło być tak prościej ... Cóż, nie wspomniałem, że document.currentScript jest właściwością HTML5. Nie został dołączony do różnych wersji IE (testowałem do IE11 i jeszcze go nie było). Ze względu na kompatybilność z IE dodałem do kodu następującą część:
document.currentScript = document.currentScript || (function() { var scripts = document.getElementsByTagName('script'); return scripts[scripts.length - 1]; })();
To, co tutaj robimy, to zdefiniowanie alternatywnego kodu dla IE, który zwraca bieżący obiekt skryptu, który jest wymagany w rozwiązaniu do wyodrębnienia parametrów z właściwości src. Nie jest to idealne rozwiązanie dla IE, ponieważ istnieją pewne ograniczenia; Jeśli skrypt jest ładowany asynchronicznie. Nowsze przeglądarki powinny zawierać właściwość „.currentScript”.
Mam nadzieję, że to pomoże.
źródło
Dzięki jQuery prostym rozwiązaniem zgodnym z HTML5 jest utworzenie dodatkowego tagu HTML, takiego jak div, do przechowywania danych.
HTML :
<div id='dataDiv' data-arg1='content1' data-arg2='content2'> <button id='clickButton'>Click me</button> </div>
JavaScript :
$(document).ready(function() { var fetchData = $("#dataDiv").data('arg1') + $("#dataDiv").data('arg2') ; $('#clickButton').click(function() { console.log(fetchData); }) });
Demo na żywo z powyższym kodem: http://codepen.io/anon/pen/KzzNmQ?editors=1011#0
W wersji demonstracyjnej na żywo można zobaczyć dane z atrybutów HTML5 data- *, które mają zostać połączone i wydrukowane w dzienniku.
Źródło: https://api.jquery.com/data/
źródło
Umieść potrzebne wartości w miejscu, gdzie inny skrypt może je pobrać, na przykład ukryte dane wejściowe, a następnie pobierz te wartości z ich kontenera podczas inicjowania nowego skryptu. Możesz nawet umieścić wszystkie parametry jako ciąg JSON w jednym ukrytym polu.
źródło
Utwórz atrybut zawierający listę parametrów, na przykład:
<script src="http://path/to/widget.js" data-params="1, 3"></script>
Następnie w swoim JavaScript pobierz parametry jako tablicę:
var script = document.currentScript || /*Polyfill*/ Array.prototype.slice.call(document.getElementsByTagName('script')).pop(); var params = (script.getAttribute('data-params') || '').split(/, */); params[0]; // -> 1 params[1]; // -> 3
źródło
Chciałem rozwiązań, które w jak największym stopniu obsługują starsze przeglądarki. W przeciwnym razie powiedziałbym, że albo currentScript, albo metoda atrybutów danych byłaby najbardziej stylowa.
To jedyna z tych metod, których jeszcze tu nie wspomniano. W szczególności, jeśli z jakiegoś powodu masz duże ilości danych, najlepszą opcją może być:
Lokalny magazyn
/* On the original page, you add an inline JS Script: */ <script> localStorage.setItem('data-1', 'I got a lot of data.'); localStorage.setItem('data-2', 'More of my data.'); localStorage.setItem('data-3', 'Even more data.'); </script> /* External target JS Script, where your data is needed: */ var data1 = localStorage.getItem('data-1'); var data2 = localStorage.getItem('data-2'); var data3 = localStorage.getItem('data-3');
localStorage ma pełną obsługę nowoczesnych przeglądarek i zaskakująco dobre wsparcie dla starszych przeglądarek, między innymi do IE 8, Firefox 3,5 i Safari 4 [jedenaście lat temu].
Jeśli nie masz dużej ilości danych, ale nadal potrzebujesz rozbudowanej obsługi przeglądarki, być może najlepszą opcją jest:
Metatagi [autorstwa Robidu]
/* HTML: */ <meta name="yourData" content="Your data is here" /> /* JS: */ var data1 = document.getElementsByName('yourData')[0].content;
Wadą tego jest to, że prawidłowe miejsce do umieszczania metatagów [do HTML 4] znajduje się w tagu head i możesz nie chcieć tam umieszczać tych danych. Aby tego uniknąć lub umieścić metatagi w treści, możesz użyć:
Ukryty akapit
/* HTML: */ <p hidden id="yourData">Your data is here</p> /* JS: */ var yourData = document.getElementById('yourData').innerHTML;
Aby uzyskać jeszcze lepszą obsługę przeglądarek, możesz użyć klasy CSS zamiast atrybutu hidden:
/* CSS: */ .hidden { display: none; } /* HTML: */ <p class="hidden" id="yourData">Your data is here</p>
źródło
To jest rozwiązanie dla jQuery 3.4
<script src="./js/util.js" data-m="myParam"></script>
$(document).ready(function () { var m = $('script[data-m][data-m!=null]').attr('data-m'); })
źródło