Modify Website Content

In this activity you will be modifying a live website, essentially creating something you could screenshot and would look 100% real but is completely fake. Please use this information responsibly and as a lesson about trusting screenshots of websites.

Software: Instructions are written for BlueSky and Chrome but should work with most major browsers and social media platforms.

Steps

Modify BlueSky Post

  1. Go onto BlueSky (or another social media site) and find a specific post you would like to modify.
  2. Right click on the part of the post you want to change and select “Inspect”.
  3. The browser should have brought up the HTML assocated with that part of the page. Below is a screenshot of me doing this with a Krebs on Security post.

alt text alt text

  1. Find the line you want to edit, right click on it, and select “Edit as HTML”. You can now edit the text or just add some.

alt text alt text

  1. Look at the resulting page.

Modify Javascript

Modifications are not limited to just HTML. It is very possible to modify code on the page and change its behavior.

Chrome is required for these instructions. It is possible in Firefox but quite annoying.

  1. Visit this practice page
  2. The page loads Javascript code. To see it, right click on “Submit” and click “Inspect”. Then select “Sources” in the developer console.
  3. Figure out what you need to enter into the text box to get the page to say “Hello World” at you.
  4. Change the Javascript so that any text will cause “Hello World” to appear.

Reflection questions

  • Reflect on the following two prompts:
    • Screenshots are often used as evidence in news articles and social media posts. Especially for content that has been deleted.
    • Websites are made of a mix of client code (HTML, JavaScript) and backend server code (PHP, Ruby, Python). Client-side checks are used quite often by websites.

Other things to try

Try removing page element that you find annoying. Technology like Ad Blockers are just automatically doing what you can do manually. Try loading a page that has a large banner or ad at the top and then remove it. You will often see me doing this at the start of class. I like to make news articles on the screen easy to read, so I often remove unecessary page elements and change the text width.

Look at client-side checks. Many pages have client-side checks for all sorts of things. Twitter, for example, used to check new passwords against a list of common passwords client-side. By opening the JavaScript you could see a list of passwords that Twitter does not allow.