Sau bài viết về vấn đề chèn nhạc nền vào trang cá nhân Facebook tại đây, mình sẽ làm Tutorial này để hướng dẫn các bạn có thể tự làm điều đó mà không cần làm theo mấy cái status lừa đảo kia.
Trong Tutorial này, mình sẽ hướng dẫn các bạn cơ bản về Javascript Injection. Đầu tiên các bạn hãy tìm hiểu qua về khái niệm này tại đây:
http://www.wikihow.com/Use-JavaScript-Injections
JavaScript injection is a process by which we can insert and use our own JavaScript code in a page, either by entering the code into the address bar, or by finding an XSS vulnerability in a website. Note that the changes can only be seen by you and are not permanent. This is because JavaScript is a "client-side" language.OK, mình bắt đầu nhé. Trước hết hãy vào trang cá nhân của bạn đã ;)
Giờ hãy tạo 1 Bookmark (Đánh dấu) mới trên thanh Bookmark (mình sử dụng Firefox):
Tên Bookmark các bạn có thể đặt tùy ý, mình đặt là "FB Injector", còn trong phần Địa chỉ thì đây chính là phần ta sẽ thực hiện "injection".
Hãy sử dụng kiến thức về Javascript và XSS Attack của bạn ^^ . Nếu có kĩ năng về DOM XSS thì càng tốt (tham khảo về DOM XSS Attack).
OK, sau khi ta click vào Bookmark này, thì ngay lập tức Title Facebook sẽ đổi thành "J2TeaM", nhưng sau đó thì bị redirect sang:
Sometimes, you may need to call some JavaSript from within a link. Normally, when you click a link, the browser loads a new page (or refreshes the same page).Ta edit Bookmark và thay đổi địa chỉ thành:
This might not always be desirable. For example, you might only want to dynamically update a form field when the user clicks a link.
To prevent the load from refreshing, you could use the JavaScriptvoid()function and pass a parameter of 0 (zero).
javascript:void(document.title='J2TeaM');Tức là bạn lồng void ở bên ngoài :D => void(YOUR_SCRIPT_HERE);
Giờ ta nhấn Back để trở lại trang cá nhân Facebook và click lại vào Bookmark, ta sẽ thấy Facebook bị injection trở thành (các bạn hãy chú ý vào Title của Facebook => J2TeaM):
OK, ta tiếp tục. Giờ hãy sử dụng kĩ năng Selector của bạn :D
Ta sẽ thử thay đổi màu nền của thanh Navbar Facebook nhé ;)
Trước tiên, ta cần xác định tên (name) hoặc ID của thanh bar này, hãy sử dụng Inspect Element của Firebug:
Giờ ta sử dụng Selector để tìm Element có ID là blueBar:=> id="blueBar"
document.getElementById('blueBar')Ta sẽ thay màu nền của nó sang màu đỏ xem sao nè :D
document.getElementById('blueBar').style.backgroundColor='#FF0000'Và đừng quên sử dụng void(), ta được đoạn Javascript Injection hoàn chỉnh như sau (thêm javascript: vào trước vì inject qua Bookmark):
javascript:void(document.getElementById('blueBar').style.backgroundColor='#FF0000');Và đây là thành quả khi ta click Bookmark này khi đang truy cập Facebook:
Wow, rực rỡ =))
Bonus thêm cái GIF click vào Bookmark cho các bạn dễ hình dung ;))
Bonus thêm cái GIF click vào Bookmark cho các bạn dễ hình dung ;))
OK, với Javascript Injection bạn có thể thay đổi các Element trong trang, thêm Element, thay background,... Làm mọi thứ bạn thích với Javascript :).
End Tutorial.
Tutorial by Juno_okyo's Blog & J2TeaM.
P/S: Nhiều bạn sẽ thắc mắc vì sao không dùng Firebug hay Developer Tools của Chrome? Hmm, đó chỉ là các công cụ debug và develop do Firefox và Chrome cung cấp. Ở đây không phải mình debug, mà mình muốn dùng Javascript để thêm nhạc nền vào Facebook (khung nhạc nền thực ra là một Element inject bởi Javascript Injection), mỗi khi vào Facebook chả nhẽ lại phải "F12" rồi ngồi mò thêm nhạc nền? Thay vào đó chỉ việc nhấn vào cái Bookmark là xong, cái nào tiện hơn nếu sử dụng lâu dài chắc các bạn đã hiểu ;)).
Thứ hai, khi sử dụng Javascript, các bạn hoàn toàn có thể develop thành 1 add-on cho Firefox hay extension cho Chrome ^_^. Hi vọng sẽ sớm thấy add-on "Music background for Facebook" của chính các bạn làm ra :P.