Javascript (Ecmascript)

Total Page:16

File Type:pdf, Size:1020Kb

Javascript (Ecmascript) Natřete to webům Natřete to webům aneb co si zkusit nabarvit cizí web na červeno nebo do něj přidat vlastní funkce…? Pavel Kříž DEN OTEVŘENÝCH DVEŘÍ FIM Z čeho se skládá webová stránka Webová stránka (jeden „dokument“) Skládá se z HTML elementů Elementy dohromady tvoří strom (podobná struktura jako složky na disku) Obsahuje/odkazuje kaskádové styly – CSS Pravidla říkající, jak má který element ve stránce vypadat a jak má být umístěn Obsahuje/odkazuje skript(y) v jazyce JavaScript (ECMAScript) „Oživují“ stránku (interaktivní prvky, dodatečné stažení dalších dat, atd.) V principu mohou s manipulovat celou stránkou DEN OTEVŘENÝCH DVEŘÍ FIM Jak si to všechno prohlédnout V Chrome přes pravé tlačítko myši na nějakém místě ve stránce a volbu prozkoumat Zobrazí se Vývojářské nástroje Dozvíme, jak je nastylován daný element Vývojářské nástroje lze zobrazit i pomocí kláves F12 nebo Ctrl-Shift-i DEN OTEVŘENÝCH DVEŘÍ FIM DEN OTEVŘENÝCH DVEŘÍ FIM Spouštíme vlastní kód v JavaScriptu Na záložce „Console“ je možné zadat příkaz v JS, který se v „v rámci stránky“ provede Příklady: Mění styl alert("Pokus") document.body.style.backgroundColor="red" document.querySelector(".bigPrice").innerHTML = "Ahoj!" CSS selektor HTML elementu Mění obsah elementu v HTML Pozor, úpravy vidíme jen my a jen do znovu-načtení stránky DEN OTEVŘENÝCH DVEŘÍ FIM Jak změnit web trvale? Pro trvalé změny webu (v našem prohlížeči!) budeme potřebovat nějaké rozšíření pro webový prohlížeč: Tampermonkey (Chrome, FF, Edge,…) – skripty, CSS Greasemonkey (Firefox) – skripty, CSS Stylish (Chrome, Firefox,…) – CSS Nainstalujeme z Internetového obchodu Chrome K dispozici už hotové úpravy pro známé weby (na skripty pozor! mohou vám např. ukrást Facebook účet) Možnost uložit si v prohlížeči vlastní skript, který se spustí vždy pro vybraný web DEN OTEVŘENÝCH DVEŘÍ FIM Vytvoření Tampermonkey skriptu Naistalovat Tampermonkey do Chrome Ikona na liště vpravo nahoře v Chrome Tlačítko Přidat nový skript… // ==UserScript== // @name New Userscript // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! Upravit „předponu“ // @author You stránek // @match https://www.alza.cz/* // @grant none // ==/UserScript== (function() { Sem napíšeme JS kód, který 'use strict'; se provede na stránkách // Your code here... })(); DEN OTEVŘENÝCH DVEŘÍ FIM Jak psát speciální symboly Speciální symboly na české QWERTZ klávesnici: Středník ; – před klávesou 1 Složené závorky { } – pravý Alt + B, pravý Alt + N Křížek # – pravý Alt + X atd… (viz obrázek) DEN OTEVŘENÝCH DVEŘÍ FIM Praktický příklad // ==UserScript== // @name New Userscript // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://www.alza.cz/* Element s cenou // @grant none // ==/UserScript== „Nadpis“ stránky (obsahuje Zakódujeme název (function() { název produktu) produktu 'use strict'; var h1 = document.querySelector("h1"); var priceElement = document.querySelector(".bigPrice"); var encodedName = encodeURIComponent(h1.textContent.trim()); priceElement.innerHTML = '<a style="color:inherit;" href="http://www.heureka.cz/?h%5Bfraze%5D=' + encodedName + '">' + priceElement.textContent + '</a>'; Vytvoříme odkaz na Heureku a })(); vložíme jej místo cenovky Uložíme skript pomocí tlačítka Uložit DEN OTEVŘENÝCH DVEŘÍ FIM Praktický příklad (pokrač.) Vrátíme se na stránku webu načteme stránku znovu (F5 nebo Ctrl-R), aby se skript spustil (poprvé) Upravit existující skript v Tampermonkey lze pomocí tlačítka Řídící panel Naučte se JavaScript , dnes se v něm píší celé webové aplikace DEN OTEVŘENÝCH DVEŘÍ FIM.
Recommended publications
  • In-Depth Evaluation of Redirect Tracking and Link Usage
    Proceedings on Privacy Enhancing Technologies ; 2020 (4):394–413 Martin Koop*, Erik Tews, and Stefan Katzenbeisser In-Depth Evaluation of Redirect Tracking and Link Usage Abstract: In today’s web, information gathering on 1 Introduction users’ online behavior takes a major role. Advertisers use different tracking techniques that invade users’ privacy It is common practice to use different tracking tech- by collecting data on their browsing activities and inter- niques on websites. This covers the web advertisement ests. To preventing this threat, various privacy tools are infrastructure like banners, so-called web beacons1 or available that try to block third-party elements. How- social media buttons to gather data on the users’ on- ever, there exist various tracking techniques that are line behavior as well as privacy sensible information not covered by those tools, such as redirect link track- [52, 69, 73]. Among others, those include information on ing. Here, tracking is hidden in ordinary website links the user’s real name, address, gender, shopping-behavior pointing to further content. By clicking those links, or or location [4, 19]. Connecting this data with informa- by automatic URL redirects, the user is being redirected tion gathered from search queries, mobile devices [17] through a chain of potential tracking servers not visible or content published in online social networks [5, 79] al- to the user. In this scenario, the tracker collects valuable lows revealing further privacy sensitive information [62]. data about the content, topic, or user interests of the This includes personal interests, problems or desires of website. Additionally, the tracker sets not only third- users, political or religious views, as well as the finan- party but also first-party tracking cookies which are far cial status.
    [Show full text]
  • How to Download Youtube Videos in Chrome Browser How to Download Youtube Videos in Chrome
    how to download youtube videos in chrome browser How to Download YouTube Videos in Chrome. This article was co-authored by Luigi Oppido. Luigi Oppido is the Owner and Operator of Pleasure Point Computers in Santa Cruz, California. Luigi has over 25 years of experience in general computer repair, data recovery, virus removal, and upgrades. He is also the host of the Computer Man Show! broadcasted on KSQD covering central California for over two years. The wikiHow Tech Team also followed the article's instructions and verified that they work. This article has been viewed 1,512,289 times. This wikiHow teaches you how to download a YouTube video onto your computer from within the Google Chrome web browser. Your best bet for downloading HD videos without ads or restrictions is using 4K Video Downloader on your computer, but you can still use a handful of websites to download videos in Google Chrome. Keep in mind that most YouTube download sites are ad-sponsored, and they won't be able to download copyright-protected videos; most YouTube download sites also can't download videos in 1080p. Since downloading YouTube videos violates Google's terms and conditions, Chrome extensions that purport to do this usually don't work. Easy Google Chrome YouTube Downloader Add-on (2021 Update) Add-on for Google Chrome can help the user to download videos from the Internet with one click, instead of having to access a new website or installing software. These Add-ons help to download videos from Google Chrome, being able to download videos from Facebook, Twitter, YouTube, Instagram, DailyMotion and many other sites easily.
    [Show full text]
  • Click-Tracking Blocker: Privacy Preservation by Disabling Search Engines’ Click-Tracking
    Click-Tracking Blocker: Privacy Preservation by Disabling Search Engines’ Click-Tracking Roberto Alberdeston, Erich Dondyk, Cliff C. Zou Computer Science Division Department of Electrical Engineering and Computer Science University of Central Florida Orlando, FL 32816 USA Abstract—On a search engine result page, if a user clicks on any between websites with or without an explicit agreement to one of those contained URL links, whether it is a search result exchange links [3]. On SERPs, they are the search result website (called organic link), or a search related advertisement website URL links satisfying what the user wants to search link (called sponsored link), the user’s click action will be tracked through a search engine. Organic links appear in the SERPs in by returning back to the search engine first and then redirecting the order according to the search engine's long term ranking to the corresponding target website. This click-tracking is algorithms. “Sponsored links” point to advertisement websites conducted by all three major search engines: Google, Bing, and Yahoo (although Bing does not track clicks on organic links). and they generate income for a search engine every time Many people are not aware that their clicks are tracked by someone clicks them and search engine is paid from that click. search companies; and this click-tracking imposes a big privacy Organic and sponsored links of Google’s SERPs are threat for privacy-concerned users. illustrated in Figure 1, which is the search result page for the After discovering that all organic and sponsored links in a search engine result page actually encode the real URLs of target search term “computer desk”.
    [Show full text]
  • OSINT Handbook September 2020
    OPEN SOURCE INTELLIGENCE TOOLS AND RESOURCES HANDBOOK 2020 OPEN SOURCE INTELLIGENCE TOOLS AND RESOURCES HANDBOOK 2020 Aleksandra Bielska Noa Rebecca Kurz, Yves Baumgartner, Vytenis Benetis 2 Foreword I am delighted to share with you the 2020 edition of the OSINT Tools and Resources Handbook. Once again, the Handbook has been revised and updated to reflect the evolution of this discipline, and the many strategic, operational and technical challenges OSINT practitioners have to grapple with. Given the speed of change on the web, some might question the wisdom of pulling together such a resource. What’s wrong with the Top 10 tools, or the Top 100? There are only so many resources one can bookmark after all. Such arguments are not without merit. My fear, however, is that they are also shortsighted. I offer four reasons why. To begin, a shortlist betrays the widening spectrum of OSINT practice. Whereas OSINT was once the preserve of analysts working in national security, it now embraces a growing class of professionals in fields as diverse as journalism, cybersecurity, investment research, crisis management and human rights. A limited toolkit can never satisfy all of these constituencies. Second, a good OSINT practitioner is someone who is comfortable working with different tools, sources and collection strategies. The temptation toward narrow specialisation in OSINT is one that has to be resisted. Why? Because no research task is ever as tidy as the customer’s requirements are likely to suggest. Third, is the inevitable realisation that good tool awareness is equivalent to good source awareness. Indeed, the right tool can determine whether you harvest the right information.
    [Show full text]
  • Delve Into Malware on Browsers Finding Related Web Content Alterations Between Browser Ex- Tensions
    Delve into Malware on Browsers Finding related web content alterations between browser ex- tensions Master’s thesis in Algorithms, Languages and Logic JOEL MORIANA BECERRA Department of Computer Science and Engineering CHALMERS UNIVERSITY OF TECHNOLOGY UNIVERSITY OF GOTHENBURG Gothenburg, Sweden 2017 Master’s thesis 2017 Delve into Malware on Browsers Finding related web content alterations between browser extensions JOEL MORIANA BECERRA Department of Computer Science and Engineering Chalmers University of Technology University of Gothenburg Gothenburg, Sweden 2017 Delve into Malware on Browsers Finding related web content alterations between browser extensions JOEL MORIANA BECERRA © JOEL MORIANA BECERRA, 2017. Supervisor: Pablo Picazo-Sanchez Examiner: Andreas Abel Master’s Thesis 2017 Department of Computer Science and Engineering Chalmers University of Technology and University of Gothenburg SE-412 96 Gothenburg Telephone +46 31 772 1000 Typeset in LATEX Gothenburg, Sweden 2017 iv Delve into Malware on Browsers Finding related web content alterations between browser extensions JOEL MORIANA BECERRA Department of Computer Science and Engineering Chalmers University of Technology and University of Gothenburg Abstract Providing the possibility of installing extensions has become a must-have feature for all major browsers. Extensions allow users to enhance and customise the browser functionalities by, for example, modifying the appearance of the web pages, providing security suites or blocking ads. In this work, we make a first step towards monitoring web content alterations coming from extensions. In particular, we focus on the identification of relations between the mutations performed by different extensions. The study is motivated by the sequential and event-driven execution model running on web pages. That model entails that browser extensions can react to web content alterations performed by other extensions; hence, extensions have access to the data introduced by other extensions.
    [Show full text]
  • Chrome Mp4 Downloader Extension Here Are Top 5 Google Chrome Video Downloaders
    chrome mp4 downloader extension Here Are Top 5 Google Chrome Video Downloaders. Google Chrome is the world’s favorite web browser and compatible with almost all platforms. When watching stream videos on Chrome, you may want to save them on your computer. How to download videos from Chrome? In this post, we will discuss the top 5 ways to download stream videos with Google Chrome video downloader. Quick Navigation : You may find some online video downloaders as well as Google Chrome video downloaders no longer support YouTube anymore. Here is a suggestion that you can use the MiniTool uTube Downloader developed by MiniTool. It’s 100% free and work software. For those who want to use Google Chrome video downloader extension, here list the top 5 Chrome video downloaders. They are totally free and workable. Video Downloader Professional. This Video Downloader Professional works on the most popular web browsers like Chrome and Firefox. You can download and save videos playing on a website like Vimeo, Dailymotion to your computer, but it doesn’t support to download music from YouTube now because of restrictions of the Chrome web store. Aside from that, it enables you to add videos easily to your video list. So you can find them quickly without having to return to its home page. Meanwhile, you can download these videos in the resolution you prefer. Video Downloader PLUS. If you are after a video streaming downloader for browser, Video Downloader PLUS is a good option. It allows you to download videos from Facebook, Vimeo, Dailymotion, Twitch, etc. See this post: Free Online Facebook Video Downloader to Save Your FB Videos.
    [Show full text]
  • In-Browser Detection of Malicious Third-Party Content Inclusions
    Include Me Out: In-Browser Detection of Malicious Third-Party Content Inclusions Sajjad Arshad, Amin Kharraz, and William Robertson Northeastern University, Boston, USA farshad,mkharraz,[email protected] Abstract. Modern websites include various types of third-party con- tent such as JavaScript, images, stylesheets, and Flash objects in order to create interactive user interfaces. In addition to explicit inclusion of third-party content by website publishers, ISPs and browser extensions are hijacking web browsing sessions with increasing frequency to inject third-party content (e.g., ads). However, third-party content can also in- troduce security risks to users of these websites, unbeknownst to both website operators and users. Because of the often highly dynamic nature of these inclusions as well as the use of advanced cloaking techniques in contemporary malware, it is exceedingly difficult to preemptively recog- nize and block inclusions of malicious third-party content before it has the chance to attack the user's system. In this paper, we propose a novel approach to achieving the goal of preemptive blocking of malicious third-party content inclusion through an analysis of inclusion sequences on the Web. We implemented our approach, called Excision, as a set of modifications to the Chromium browser that protects users from malicious inclusions while web pages load. Our analysis suggests that by adopting our in-browser approach, users can avoid a significant portion of malicious third-party content on the Web. Our evaluation shows that Excision effectively identifies mali- cious content while introducing a low false positive rate. Our experiments also demonstrate that our approach does not negatively impact a user's browsing experience when browsing popular websites drawn from the Alexa Top 500.
    [Show full text]
  • Personalizing Voyager Using Browser Extensions
    Lybarger: Personalizing Voyager using Browser Extensions University of Kentucky UKnowledge Library Presentations University of Kentucky Libraries 5-8-2015 Personalizing Voyager Using Browser Extensions Kathryn Lybarger University of Kentucky, [email protected] Follow this and additional works at: http://uknowledge.uky.edu/libraries_present Part of the Cataloging and Metadata Commons Repository Citation Lybarger, Kathryn, "Personalizing Voyager Using Browser Extensions" (2015). Library Presentations. Paper 128. http://uknowledge.uky.edu/libraries_present/128 This Presentation is brought to you for free and open access by the University of Kentucky Libraries at UKnowledge. It has been accepted for inclusion in Library Presentations by an authorized administrator of UKnowledge. For more information, please contact [email protected]. Published by TopSCHOLAR®, 2015 1 Ex Libris Bluegrass Users Group Newsletter, Vol. 2015 [2015], Art. 5 Personalizing Voyager using Browser Extensions Kathryn Lybarger @zemkat ELUNA 2015 #eluna2015 May 8, 2015 http://digitalcommons.wku.edu/ebug_newsletter/vol2015/iss1/5 2 Lybarger: Personalizing Voyager using Browser Extensions Personalizing Voyager As an institution, we have a fair amount of power over how Voyager’s OPAC looks Colors and fonts Which fields are searchable What displays in search results What displays in full record view … (anything really) Published by TopSCHOLAR®, 2015 3 Ex Libris Bluegrass Users Group Newsletter, Vol. 2015 [2015], Art. 5 Must find a balance Provide good access to most of our patrons Don’t clutter the interface needlessly http://digitalcommons.wku.edu/ebug_newsletter/vol2015/iss1/5 4 Lybarger: Personalizing Voyager using Browser Extensions But how about… Personalizing for particular groups of patrons? Personalizing for staff needs? Doing so quickly? Even temporarily? Published by TopSCHOLAR®, 2015 5 Ex Libris Bluegrass Users Group Newsletter, Vol.
    [Show full text]
  • Browser Extension Compromise
    Browser Extension Compromise Caroline Sheng Outline Introduction Privileges and Permissions Malware extensions Security Threats Human Factors Problems Where do we go from here? What can you do? Introduction What are browser extensions? A piece of software What do they do? Extend functionality of web browsers Who can create them? Basically anyone Many popular extensions are written by third party developers Extension Statistics Popular examples: AdBlock – 40 million users on Chrome TamperMonkey – 10,000,000+ users Google Mail Checker – 5,000,000+ users on Chrome Source: Chrome Web Store In 2011, 85% of Firefox users had at least one extension installed Privileges and Permissions Privileges: how much access does the extension have to your browser Extensions often require high privileges, which can put users at risk Privileges and Permissions (cont.) Until 2017, all Firefox extensions were allowed complete browser privileges Allowed file system and network access Did not follow practice of least privilege: Restricting access to only the resources required to perform activities Permission Systems Now, Firefox, Chrome, and Internet Explorer all have similar permission systems: Developers: must define what privileges their extension requires Users: are notified of what permissions an extension requires before installing it Permission Warning Tampermonkey: provides environment for users to write small scripts to modify browser behavior More privileges required Web Developer: Adds a toolbar to browser with web development
    [Show full text]
  • Os Spotlight
    Getting started with Android Development • Installing Pepper Flash Year One Issue #8 Aug 2014 ODROIDMagazine INTRODUCING THE ODROID-W HARDKERNEL’S MICRO-SIZED PI-COMPATIBLE BATTERY-POWERED WEARABLE COMPUTER! MAKE YOUR OS SPOTLIGHT: OWN ODROID POCKET ROCKET AND COUCH POTATO SMARTWATCH • THE NEXT-GENERATION ODROID-U3+ THE ULTIMATE ANDROID GAMING IMAGE WITH • STEP-BY-STEP BASICS OF LINUX KERNEL COMPILATION 1080P VIDEO PLAYBACK • INSTALL A WEB SERVER WITH NGINX AND LIGHTTPD What we stand for. We strive to symbolize the edge technology, future, youth, humanity, and engineering. Our philosophy is based on Developers. And our efforts to keep close relationships with developers around the world. For that, you can always count on having the quality and sophistication that is the hallmark of our products. Simple, modern and distinctive. So you can have the best to accomplish everything you can dream of. We are now shipping the ODROID U3 devices to EU countries! Come and visit our online store to shop! Address: Max-Pollin-Straße 1 85104 Pförring Germany Telephone & Fax phone : +49 (0) 8403 / 920-920 email : [email protected] Our ODROID products can be found at: http://www.pollin.de/shop/suchergebnis.html?S_ TEXT=odroid&log=internal EDITORIAL ardkernel had a busy month, and released several new products that once again prove that they are the innovative Hleaders in ARM micro-computing. Not only has Justin and his team developed a new model for both the U and XU series, but they have also created a tiny wearable Raspberry Pi-compatible product that packs extra features. The ODROID-VU is the USB touch- screen that you’ve been waiting for! A 9-inch model with 10-point multi- touch input will be available in the middle of August, and will not only work with the ODROID family of computers, but is also compatible with any Windows, Ubuntu and An- droid machine that supports USB monitors.
    [Show full text]
  • How to Remove Google Logo from Searches in Firefox and Chrome and Safari Web Browsers - Disable Seeing Annoying Google Doodles Content with ABP
    ? Walking in Light with Christ - Faith, Computing, Diary Articles & tips and tricks on GNU/Linux, FreeBSD, Windows, mobile phone articles, religious related texts http://www.pc-freak.net/blog How to remove Google Logo from Searches in Firefox and Chrome and Safari Web browsers - Disable seeing Annoying Google Doodles content with ABP Author : admin Most of people nowadays are using Google as a default search engine for different reasons, some because of its popularity and most importantly because Google is considered the Largest and most used and superior in quality Internet Search Engine in the World as of time of writting this post. However as most (if not all) Companies and Corporations nowdays in this terrible freedom enslaving Globalistic world, Google's popularity is not only a result of their superiority of service but a consequence of 17 years constant branding (or better to say user brainwashing) to addict peoples arround the world to their colorful logo and their Loud name GOOGLE (contains 2G's 2O's 1L and 1E or as it might be associated subsconsciously = Le, 2 G, 2 O or LE 2 GO - looks pretty much like the English LET GO - doesn't it??) . Color programming has become a popular way for companies and brands to keep our minds affected the Colorful addiction and has been definitely quite seriously researched throughout World War I and World War II and Post war times by Governments and Psychological institute studies some of which tried to call it and name it as NLP (Neuro Linguistic Programming) and made a pseudo-science that is more of a spiritual new age occult thing than really based on facts.
    [Show full text]
  • Browser Extension Security
    Security Now! Transcript of Episode #699 Page 1 of 30 Transcript of Episode #699 Browser Extension Security Description: This week we look at the expressive power of the social media friends we keep, the persistent DNS hijacking campaign which has the U.S. government quite concerned, last week's iOS and macOS updates (and doubtless another one very soon!), a valiant effort to take down malware distribution domains, Chrome catching up to IE and Firefox with drive-by file downloads, two particularly worrisome vulnerabilities in two Cisco router models publicly disclosed last Friday, some interesting miscellany, a particularly poignant SpinRite data recovery testimonial, and then some close looks at the state of the industry and the consequences of extensions to our web browsers. High quality (64 kbps) mp3 audio file URL: http://media.GRC.com/sn/SN-699.mp3 Quarter size (16 kbps) mp3 audio file URL: http://media.GRC.com/sn/sn-699-lq.mp3 SHOW TEASE: It's time for Security Now!. Steve Gibson is here. Lots to talk about this week. Of course, iOS flaws, including the FaceTime flaw. He's also going to talk about DNS hijacking, why so many sites host malware, and he has a little bit to say about an interesting study that shows how your online friends say a lot about you. It's all coming up next on Security Now!. Leo Laporte: This is Security Now! with Steve Gibson, Episode 699, recorded Tuesday, January 29th, 2019: Browser Extension Security. It's time for Security Now!. Here he is, ladies and gentlemen, the man you've all been waiting for for a whole seven days, Steve Gibson, the man of the hour.
    [Show full text]