HTML Source Code

han614698

I have this code currently in my website:
index.html

<!DOCTYPE html>
<html>
    <head>
<link rel="icon" href="https://cdn2.scratch.mit.edu/get_image/user/41022482_60x60.png" width="15" height="15"" type="image/x-icon">
<title>han614698</title>
    </head>
    <body style="background-color:powderblue;">
<center><h1 style="background-color:tomato;">han614698</h1></center>
<nav style="background-color:DarkKhaki;">
  <center>| <a href="stats.htm">Ocular</a> |
  <a href="scratch.htm">Scratch</a> |
  <a href="https://snap.berkeley.edu/user?user=han614698">My Snap<i>!</i></a> |
  <a href="https://scratchstats.com/han614698">My General Stats</a> |
  <a href="https://shefwerld.rirurin.com/post/user?user=han614698">My Forum Stats</a> |
  <u><b>Home</b></u></center>
  </nav>
  <p>Jump to <a href="#AM">About Me</a></p>
  <p>Jump to <a href="#WCLIK">What Coding Languages I Know</a></p>
<center><h2 id="AM"><u>About Me</h2></center></b></u>
<br>
<p style="font-family:verdana;">I like foruming. I forum <em><strong><u>every <i>single <b>day</b></i></u></strong></em>, making 25+ per day.</p>
<p>I like coding.</p>
     <center><p><h2 id="WCLIK"><u>What Coding Languages I Know</h2></p></center></u>
     <br>
<p title="All of these are programming languages">I know Snap<i>!</i>, HTML, <mark>a bit</mark> of PHP, Scratch, and Python.</p>
<hr>
<figure>
<img src="https://cdn2.scratch.mit.edu/get_image/user/41022482_60x60.png" width="100" height="100" alt="My Scratch Profile Picture">
<figcaption>This is My Scratch Profile Picture!</figcaption></figure>
<hr>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
}
th {
  text-align: center;
}
table {
  border-spacing: 5px;
}
#t0001 {
  width: 100%;    
  background-color: #f1f1c1;
}
</style>
<table id="t0001">
  <caption>Featured Forumers</caption>
  <tr>
    <th>Username</th>
    <th>Alt</th>
    <th>Post Count</th>
  </tr>
  <tr>
    <center><td><a href="https://scratch.mit.edu/users/kccuber">kccuber</a></td>
    <td><a href="https://scratch.mit.edu/users/airplanedodge">airplanedodge</a></td>
    <td>1300+</td>
  </tr>
  <tr>
    <td><a href="https://scratch.mit.edu/users/-EmeraldThunder-">-EmeraldThunder-</a></td>
    <td><a href="https://scratch.mit.edu/users/-EmeraIdThunder-">-EmeraIdThunder-</a></td>
    <td>1250+</td></center>
  </tr>
</table>
<pre>
</pre>
<div style="border: 1px solid black">Hello there! Please visit my <a href="https://scratch.mit.edu/users/han614698">Scratch Profile</a>!</div>
<hr>
<hr>
<footer><small><p><cite>Scratch</cite> is a project of the <cite>Scratch Foundation</cite>, in collaboration with the <cite>LLK group</cite> at the <cite>MIT Media Lab</cite>, maintained by the Scratch Team.</p></small>
</footer>
</body>
</html>

scratch.htm

<!DOCTYPE html>
<html>
    <head>
<link rel="icon" href="https://cdn2.scratch.mit.edu/get_image/user/41022482_60x60.png" width="15" height="15"" type="image/x-icon">
<title>Scratch - han614698</title>
    </head>
<body style="background-color:powderblue;">
<nav style="background-color:DarkKhaki;">
  <center>| <a href="stats.htm">Ocular</a> |
  <u><b>Scratch</u></b> |
  <a href="https://snap.berkeley.edu/user?user=han614698">My Snap<i>!</i></a> |
  <a href="https://scratchstats.com/han614698">My General Stats</a> |
  <a href="https://shefwerld.rirurin.com/post/user?user=han614698">My Forum Stats</a> |
  <a href="index.htm">Home</a> |</center>
</nav>
<hr>
<h2><center>Scratch</center></h2>
<p>My Scratch accounts are <a href="https://scratch.mit.edu/users/han614698">han614698</a> and <a href="https://scratch.mit.edu/users/TheForumer">TheForumer</a>.
I have 220+ followers and 2400+ forum posts. I have 300+ projects as well as coding skills.
This is the block I want most in Scratch:<pre>
<img src="https://assets.scratch.mit.edu/get_image/.%2E/23abb999319e8c0900eb6013742a3321.png"></pre>
<hr>
</body>
</html>

and finally the one I need help with:
stats.htm

<!DOCTYPE html>
  <html>
    <head>
       <link rel="icon" href="https://cdn2.scratch.mit.edu/get_image/user/41022482_60x60.png" width="15" height="15"" type="image/x-icon">
  <title>Ocular</title>
    <body style="background-color:powderblue;">
<nav style="background-color:DarkKhaki;">
  <center>| <u><b>Ocular</b></u> |
  <a href="scratch.htm">Scratch</a> |
  <a href="https://snap.berkeley.edu/user?user=han614698">My Snap<i>!</i></a> |
  <a href="https://scratchstats.com/han614698">My General Stats</a> |
  <a href="https://shefwerld.rirurin.com/post/user?user=han614698">My Forum Stats</a> |
  <a href="index.htm">Home</a> |</center>
</nav>
   <hr>
    <center><h2 style="background-color:MediumSeaGreen;">Ocular</h2></center>
  <p><a href="https://ocular.jeffalo.net">Ocular</a> is a great forum search tool. You can find my posts on ocular <a href="https://ocular.jeffalo.net/search?q=%2Busername%3A%22han614698%22&sort=newest">here</a>.</p>
 <p><blockquote cite="https://ocular.jeffalo.net/docs/privacy"><i>TLDR: ocular only collects basic analytics data, registered user data and data that powers features such as reactions and starring. I don't want your private info.</i><sup><small>[<a href="https://ocular.jeffalo.net/docs/privacy">1</a>]</small></sup></blockquote></p>
  <address>
    <p><small>Ocular was made by <a href="https://scratch.mit.edu/users/Jeffalo">Jeffalo</a>.</small></p> 
  </address>
<hr>
  </body>
</html>

Anyway, I want to put in a way for people to search with an embedded search:

            <form action="" method="get">
                <input type="text" name="user" placeholder="Type in your username here...."></input>
                <input type="submit" value="Go">
            </form>

After that is answered, I want it to to this:

<p><a href="https://ocular.jeffalo.net/search?q=%2Busername%3A%22query%22&sort=newest>These</a> are your forum posts.</p>

I figure I need to use

<script> </script>

tags.

Last edited by han614698 (May 28, 2021 13:28:15)

Credit to -gge for the icons in my signature | I condensed all this code into five lines using [p] tags, idk why

-Accio-

This should work. You don't have to use a form element.

<html>
	<input type="text" name="user" placeholder="Type in your username here...." id="usernameInput"></input>
	<button id="submitButton" onclick="redirect()">Submit</button>
	<p id="usernameResult"></p>

	<script>
		function redirect() {
			var username = document.getElementById("usernameInput").value
			document.getElementById("usernameResult").innerHTML = `<a href="https://ocular.jeffalo.net/search?q=%2Busername%3A%22${username}%22&sort=newest">These</a> are your forum posts.`
		}
	</script>
</html>

Note: This is vulnerable to XSS since it uses .innerHTML. This shouldn't be too much of an issue though because the user is the only one inputting data, so any malicious code would only impact them.

Hi There! I'm -Accio-

I am currently attending university for a Bachelor's of Science in Chemistry.

“If you are not part of the solution, you are part of the precipitate”

gosoccerboy5

-Accio- wrote:
Note: This is vulnerable to XSS since it uses .innerHTML. This shouldn't be too much of an issue though because the user is the only one inputting data, so any malicious code would only impact them.

I'm not very smart, so I'm wondering: how is that vulnerable to XSS?

Raihan142857

gosoccerboy5 wrote:
-Accio- wrote:
Note: This is vulnerable to XSS since it uses .innerHTML. This shouldn't be too much of an issue though because the user is the only one inputting data, so any malicious code would only impact them.
I'm not very smart, so I'm wondering: how is that vulnerable to XSS?

const html = '<img src="a" onerror="alert(\'xss\')" />';
element.innerHTML = html;

Last edited by Raihan142857 (May 28, 2021 03:29:44)

I use scratch.
GF: I'll dump you. BF: hex dump or binary dump?

Sheep_maker

By the way, if you want to post HTML code, you should use [code=html] to make it look all pretty and colourful:

[code=html]
<noscript>This parses differently depending on whether you have JS enabled!<div title="</noscript>Hi!">
[/code]

makes

<noscript>This parses differently depending on whether you have JS enabled!<div title="</noscript>Hi!">

Last edited by Sheep_maker (May 28, 2021 05:48:11)

- Sheep_maker This is a kumquat-free signature. :P
This is my signature. It appears below all my posts. Discuss it on my profile, not the forums. Here's how to make your own.
.postsignature { overflow: auto; } .scratchblocks { overflow-x: auto; overflow-y: hidden; }

Maximouse

gosoccerboy5 wrote:
-Accio- wrote:
Note: This is vulnerable to XSS since it uses .innerHTML. This shouldn't be too much of an issue though because the user is the only one inputting data, so any malicious code would only impact them.
I'm not very smart, so I'm wondering: how is that vulnerable to XSS?

If the username was

"></a><script>alert("hi!")</script><a href="

the result of the string interpolation would be

<a href="https://ocular.jeffalo.net/search?q=%2Busername%3A%22"></a><script>alert("hi!")</script><a href=%22&sort=newest">These</a> are your forum posts.

and because the HTML is inserted into the document, the script would run. This is bad because it can read cookies, send requests to the site…

This is Maximouse's signature. Learn more about signatures.

han614698

Sheep_maker wrote:
By the way, if you want to post HTML code, you should use [code=html] to make it look all pretty and colourful:
[code=html]
<noscript>This parses differently depending on whether you have JS enabled!<div title="</noscript>Hi!">
[/code]
makes
<noscript>This parses differently depending on whether you have JS enabled!<div title="</noscript>Hi!">

Ah. I used [code=HTML] not [code=html].

Credit to -gge for the icons in my signature | I condensed all this code into five lines using [p] tags, idk why

gosoccerboy5

Maximouse wrote:
and because the HTML is inserted into the document, the script would run. This is bad because it can read cookies, send requests to the site…

I see now, thank you!
Erm, I hate to be bothersome, but what can a <script> tag do that the browser console can't?

Maximouse

gosoccerboy5 wrote:
Maximouse wrote:
and because the HTML is inserted into the document, the script would run. This is bad because it can read cookies, send requests to the site…
I see now, thank you!
Erm, I hate to be bothersome, but what can a <script> tag do that the browser console can't?

Nothing, but it's easier to convince someone to enter something into a box on the page, and if the code was changed to get the username from an external source instead of asking the user, that could cause problems.

This is Maximouse's signature. Learn more about signatures.

gosoccerboy5

Maximouse wrote:
gosoccerboy5 wrote:
Maximouse wrote:
and because the HTML is inserted into the document, the script would run. This is bad because it can read cookies, send requests to the site…
I see now, thank you!
Erm, I hate to be bothersome, but what can a <script> tag do that the browser console can't?
Nothing, but it's easier to convince someone to enter something into a box on the page, and if the code was changed to get the username from an external source instead of asking the user, that could cause problems.

Ah. Would using document.createElement be less susceptible to this?

han614698

gosoccerboy5 wrote:
Maximouse wrote:
gosoccerboy5 wrote:
Maximouse wrote:
and because the HTML is inserted into the document, the script would run. This is bad because it can read cookies, send requests to the site…
I see now, thank you!
Erm, I hate to be bothersome, but what can a <script> tag do that the browser console can't?
Nothing, but it's easier to convince someone to enter something into a box on the page, and if the code was changed to get the username from an external source instead of asking the user, that could cause problems.
Ah. Would using document.createElement be less susceptible to this?

Not by much IIRC.

Credit to -gge for the icons in my signature | I condensed all this code into five lines using [p] tags, idk why

Maximouse

gosoccerboy5 wrote:
Would using document.createElement be less susceptible to this?

If you use it correctly, createElement is safe.

This is Maximouse's signature. Learn more about signatures.

Discuss Scratch

HTML Source Code

HTML Source Code

HTML Source Code

HTML Source Code

HTML Source Code

HTML Source Code

HTML Source Code

HTML Source Code

HTML Source Code

HTML Source Code

HTML Source Code

HTML Source Code

About

Community

Resources

Legal

Scratch Family

Discuss Scratch

HTML Source Code

HTML Source Code

HTML Source Code

HTML Source Code

HTML Source Code

HTML Source Code

HTML Source Code

HTML Source Code

HTML Source Code

HTML Source Code

HTML Source Code

HTML Source Code

About

Community

Resources

Legal

Scratch Family

Sign in