4.1.2. Using JS to access DOM objects of the web site.

Go to Console Panel, with javascript:

a. Try to access DOM objects of page: document.body, document.body.innerText,
document.body.innerHTML or whichever that you can.
Dòng text “Hey, Site A is working” đã chuyển thành “Header text is modified via document object” theo
đúng yêu cầu

c. Create a newwin variable for a new tab:

var newwin = window.open(“http://siteb.com”,”right”). Can you access document object of
newwin? Explain why if you could not.

d. Enter JS code to set the new location for tab sitea which is the opener of current tab:
window.opener.location= “http://parentsite.com”.
e. Try JS code to access document.body object of window.opener. Explain why if you could not.

Không thể truy xuất vào document.body của window.opener vì cơ chế bảo mật của trình duyêt, không cho
phép truy cập vào document của site khác nguồn gốc (origin).
4.1.3. Frame objects
Access http://parentsite.com then choose parentsite in list of sites on iframe picker.
a)Can you access window.framea, window.frameb?.

Có thể truy xuất vào window.framea và window.frameb

b)Can you access document.body of framea, fraremeb from parentsite?

Không thể truy xuất vào document.body của framea, fraremeb từ parentsite
c)Can you access window.parentsite?

d)Can you access document.body object of parentsite.com? Which object of parentsite that sitea
can access?

Có thể truy cập vào document.body object of parentsite.com

Select parentsite.com in list of sites on iframe picker, define a variable named hello: var hello=”
world”
e)Can you access hello from sitea, siteb?

Không thể truy cập hello từ sitea, siteb

4.1.4. Sending POST request to a site:
a) Access http://sitea.com/post.html
b) Type some text in textbox then click “Submit query”. What would show up? Explain why you
see that.

Sau khi nhấn Submit query thi trang siteb.com hiện lên.

Nguyên nhân hiện lên:

Khi nhấn vào “View page source” ta thấy thẻ form có action = “http://siteB.com” với method là POST.
Điều này có nghĩa là server siteb sẽ nhận POST request.
c) Repeat step (a), toggle Web console >> Network (Ctrl + Shift + E)
d) Repeat step (b), examine the request and response header. What can you conclude about POST
form request.

POST form request gửi dữ liệu từ máy khách đến máy chủ trong nội dung yêu cầu, với loại và
định dạng của dữ liệu này được chỉ định trong tiêu đề yêu cầu kiểu nội dung.
4.1.5. Access image, stylesheet from other sites
a) In the Inspector panel of sitea.com, can you change sitea’s image to image from siteb.com?
b) In the Inspector panel of sitea.com, can you change the stylesheet to that of siteb.com?
4.1.6. SOP applies to web storage
Load www.sitea.com in one tab, open Web developer panel > Storage, check that the LocalStorage
is empty (Storage >> Local Storage)
a) Define a new variable named first = 10. You can define either: with javascript in console:
window.LocalStorage[“first”] = 10 or
Add Item in Storage tab

b) Open sitea.com in a new tab. Can you access first variable in this tab?

Có thể truy xuất vào “first” trong sitea.com ở một tab mới
Change first to a new value, go back to the previous sitea.com tab, what is the value of first then.
c) Can you access first from siteb.com?

Không thể truy cập first trong siteb.com

d) Close all sitea.com tabs. How about first variable when sitea.com is re-opened

e)Close all sitea.com tabs. How about first variable when sitea.com is re-opened.

f) What can you conclude about Local Storage?

- Local Storage là tính năng trong trình duyệt web cho phép ứng dụng web lưu trữ dữ liệu cục bộ trên
thiết bị của người dùng.
Repeat the above steps from (a) to (e) but with Session Storage. What can you conclude about
Session Storage?
a) Define a new variable named first = 10. You can define either: with javascript in console:
window.sessionStorage[“first”] = 10 or
Add Item in Session tab
b) Open sitea.com in a new tab. Can you access first variable in this tab?

Không thể truy xuất vào “first” trong sitea.com

Change first to a new value, go back to the previous sitea.com tab, what is the value of first then.

c) Can you access first from siteb.com?

Không thể truy cập vào first ở siteb.com

d) Close all sitea.com tabs. How about first variable when sitea.com is re-opened.

Giá trị của first sau khi tắt hết các tab sitea.com và bật lại sitea.com là undefined
e) Close browser then re-open, does first variable still exist?

Biến first không còn tồn tại sau khi đóng browser và mở lại.
f) What can you conclude about Session Storage?
- Session Storage là một tính năng trong trình duyệt web cho phép ứng dụng web lưu trữ dữ liệu cục bộ
trên cơ sở từng phiên làm việc
.