Khóa luận Cross-domain Ajax cho các ứng dụng web mashup
ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ
Nguyễn Thị Hương
CROSS-DOMAIN AJAX CHO CÁC ỨNG DỤNG
WEB MASHUP
KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY
Ngành: Công nghệ thông tin
ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ
Nguyễn Thị Hương
CROSS-DOMAIN AJAX CHO CÁC ỨNG DỤNG
WEB MASHUP
KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY
Ngành: Công nghệ thông tin
Cán bộ hướng dẫn: TS. Nguyễn Hải Châu
HÀ NỘI - 2009
LỜI CẢM ƠN
Trong thời gian nghiên cứu và làm khóa luận, tôi xin chân thành cảm ơn đặc
biệt đến thầy giáo hướng dẫn Nguyễn Hải Châu, người đã giúp tôi lựa chọn đề tài,
hướng dẫn tìm tài liệu và đưa ra những nhận xét quan trọng giúp tôi hoàn thành tốt đề
tài khóa luận tốt nghiệp. Bên cạnh đó, tôi xin chân thành cảm ơn các thầy cô giáo
trong khoa Công Nghệ Thông Tin – trường Đại học Công Nghệ - ĐHQGHN đã giảng
dạy và trang bị cho tôi những kiến thức cơ bản trong học tập nghiên cứu khoá luận
cũng như trong công việc sau này.
Những lời động viên, khích lệ từ gia đình, sự chia sẻ, học hỏi từ bạn bè cũng là
đã góp phần rất nhiều cho khóa luận tốt nghiệp của tôi đạt kết quả tốt hơn.
Do trình độ hạn chế nên trong quá trình làm khóa luận khó tránh khỏi những
thiếu sót, tôi rất mong sự chỉ bảo thêm của thầy cô giúp tôi hoàn thành và đạt kết quả
tốt hơn.
Tôi xin chân thành cảm ơn !
Hà Nội, ngày 24 tháng 5 năm 2009
Nguyễn Thị Hương
TÓM TẮT KHÓA LUẬN TỐT NGHIỆP
Ngày nay, mashup ngày càng trở nên thịnh hành theo trào lưu Web 2.0. Mashup
cho phép mọi người thể hiện khả năng sáng tạo bất tận bằng cách ‘nối’ hai hay nhiều
ứng dụng web lại với nhau. Và nếu có chính sách kiểm soát thích hợp, mashup có thể
tạo nên một lớp ứng dụng mới hiệu quả và hữu ích trong rất nhiều môi trường. Để
mashup dữ liệu từ nhiều nguồn khác nhau đó, chúng ta phải thực hiện cross-domain
Ajax. Nhưng để cross-domain được, không phải là việc dễ vì yêu cầu bảo mật dữ liệu
và yêu cầu trang web đạt được những tính năng đầy đủ phải được hài hòa.
Hiện có một số phương pháp cho việc cross-domain. Và khóa luận ‘Cross-
domain Ajax cho các ứng dụng mashup’ trình bày những nghiên cứu tổng thể về
mashup và cross-domain ajax, những cách thức để thực hiện cross-domain trong ajax.
Tiếp đó là việc nghiên cứu về hoạt động và lập trình Google Maps API để có cơ sở
xây dựng một ứng dụng thử nghiệm với cross-domain cho mashup.
MỤC LỤC
DANH MỤC CÁC SƠ ĐỒ
THUẬT NGỮ VÀ CÁC CHỮ VIẾT TẮT
LỜI MỞ ĐẦU
CHƯƠNG I. CROSS-DOMAIN AJAX VÀ ỨNG DỤNG ĐỂ XÂY DỰNG WEB
MASHUP........................................................................................................................1
1.1. Giới thiệu chung về Cross-Domain Ajax ..........................................................2
1.1.1 AJAX ...............................................................................................................2
1.1.2. XMLHttpRequest ...........................................................................................2
1.1.1. Chính sách Same-Origin.................................................................................3
1.1.3. Thẻ <script>....................................................................................................4
1.1.4. Gadget Aggregator..........................................................................................4
1.2. Giới thiệu về Mashup..........................................................................................4
1.3. Một số ứng dụng để xây dựng Web Mahup .....................................................7
1.3.1. Sử dụng Google Maps API.............................................................................8
1.3.2. Sử dụng Amazon Web Services và Google Search APIs...............................9
1.3.3. Sử dụng Flickr API.......................................................................................11
1.3.4. Sử dụng ebay API.........................................................................................12
CHƯƠNG II. CROSS-DOMAIN AJAX VÀ ............................................................14
CÁC GIẢI PHÁP THỰC HIỆN TRONG AJAX.....................................................14
2.1. Cross domain proxy.........................................................................................14
2.2. Cross domain JSON.........................................................................................15
2.2.1. JSONRequest.post ........................................................................................16
2.2.2 JSONRequest.get..........................................................................................17
2.2.3. JSONRequest.cancel.....................................................................................17
2.2.4. Bảo mật.........................................................................................................17
2.2.5. Hoạt động của JSON ....................................................................................18
2.3. Cross domain sử dụng Flash...........................................................................19
2.4. Subspace............................................................................................................20
2.4.1. Subdomain ...................................................................................................22
2.4.2. Đơn Web Service.........................................................................................22
2.4.3. Đa Web Service ...........................................................................................23
2.5. Giải pháp trong thế hệ tiếp theo .....................................................................24
2.5.1. FlashXMLHttpRequest................................................................................24
2.5.2. ContextAgnosticXMLHttpRequest .............................................................24
CHƯƠNG III. XÂY DỰNG ỨNG DỤNG THỬ NGHIỆM CROSS-DOMAIN
AJAX.............................................................................................................................26
3.1. Giới thiệu về Google Maps ..............................................................................26
3.2. Giới thiệu về Google Maps API ......................................................................26
3.2.1. Maps API Basics..........................................................................................27
3.2.2. Maps API Events .........................................................................................29
3.2.3. Maps API Controls ......................................................................................30
3.2.4. Map Overlays...............................................................................................31
3.2.5. Google Maps API Services..........................................................................33
KẾT LUẬN ..................................................................................................................34
TÀI LIỆU THAM KHẢO
DANH MỤC CÁC SƠ ĐỒ
Hình 1. XmlHttpRequest với Ajax ..........................................................................3
Hình 2. Mashup nội dung từ nhiều nguồn...............................................................5
Hình 3. Dữ liệu tương tác hiển thị với Ajax............................................................5
Hình 4. Khác nhau giữa ba website – Amazon, Google, eBay ...............................6
Hình 5. Mashup làm việc..........................................................................................6
Hình 6. Tạo một mashup ........................................................................................7
Hình 7. Ứng dụng cho mashup................................................................................7
Hình 8. Đăng nhập Google Maps API key..............................................................8
Hình 9. Đăng nhập cho tài khoản Amazon Associates............................................9
Hình 10. Đăng nhập cho tài khoản AWS ..............................................................10
Hình 11. Google Search API .................................................................................10
Hình 12. Đăng nhập cho tài khoản Flickr API ......................................................11
Hình 13. Flickr photos search................................................................................12
Hình 14. Đăng nhập cho tài khoản Flickr API ......................................................12
Hình 15. Cross-domain Proxy ................................................................................14
Hình 16. Hạn chế của cross domain XMLHttpRequest .........................................15
Hình 17. Của cross domain JSON.........................................................................16
Hình 18. Hoạt động của JSON ..............................................................................18
Hình 19. Lỗi 2044..................................................................................................19
Hình 20. Gọi ra dữ liệu từ domain đơn unstrusted 3rd-party. .................................22
Hình 21. Kết nối đa web service............................................................................23
Hình 22. Mashup và các ứng dụng........................................................................26
Hình 23. Google Maps API ...................................................................................27
Hình 24. map_api_basic.html................................................................................27
Hình 25. map_api_event.html.................................................................................29
Hình 26. map_api_overlay.html ............................................................................32
Hình 27. map_api_polyline.html...........................................................................33
Hình 28. map_api_geocoding.html .......................................................................33
THUẬT NGỮ VÀ CÁC CHỮ VIẾT TẮT
AJAX
API
Asynchronous JavaScript and XML
Application Programming Interface
Cascading Style Sheets
CSS
DOM
JSON
HTML
REST
RSS
Document Object Model
JavaScript Object Noattion
Hypertext Markup Languages
Representational state transfer
Really Simply Syndication
Simple Object Access Protocol
SOAP
XHTML Extensible HyperText Markup Language
XML
XSLT
URL
Extensible Markup Language
Extensible Stylesheet Language Transformations
Uniform Resource Locator
LỜI MỞ ĐẦU
Vài năm trở lại đây, ngày càng nhiều công ty phát hành những chương trình cho
phép kết hợp dữ liệu và dịch vụ trên web của các doanh nghiệp với nhau, đồng thời
cũng phát triển hài hòa giữa bảo mật và các yêu cầu của khách hàng. Chúng được trộn
lẫn (mashup) một cách thông minh và sáng tạo. Nhưng có một vấn đề về bảo mật được
đưa ra khi bạn chuyển dữ liệu giữa các domain. Với các hạn chế cross-domain, được
xây dựng trên hầu hết các trình duyệt, là một sự khó khăn cho mashup. Việc tìm hiểu
sử dụng web proxy hoặc JSON, ... để nâng cao các hiệu quả mashup.
Đề tài ‘Cross-domain ajax cho các ứng dụng web mashup’ nhằm mục đích tìm
hiểu về cách thức và phương pháp thực hiện các lời gọi cross domain trong ajax. Và
trang bị kiến thức về thư viện ajax cross domain, Google Maps API để lập trình ứng
dụng thử nghiệm cho mashup.
Khóa luận được chia làm 3 chương:
Chương I là phần giới thiệu cross-domain ajax cùng một số vấn đề liên quan, và
các ứng dụng để xây dựng web mashup.
Chương II sẽ giới thiệu chi tiết về cross-domain và cross-domain ajax, sau đó
sẽ là phần tóm tắt những giải pháp đang được thực hiện đối với cross-domain trong
ajax.
Chương III là chương dành cho việc nghiên cứu về hoạt động và lập trình
Google Maps (API), đó là một cơ sở cho việc xây dựng một ứng dụng thử nghiệm
cross-domain cho mashup. Và cuối cùng, là phần tổng kết bài khóa luận và phần tài
liệu tham khảo.
1
CHƯƠNG I. CROSS-DOMAIN AJAX VÀ ỨNG DỤNG ĐỂ XÂY
DỰNG WEB MASHUP
1.1. Giới thiệu chung về Cross-Domain Ajax
Hãy lấy một ví dụ: sẽ rất tuyệt nếu bạn có thể lấy dữ liệu từ trang từ điển của
mình để dùng ở mọi trang web khác. Điều đó đòi hỏi các trang đó cần mashup dữ liệu
của bạn, và khi đó phải thực hiện cross-domain ajax. Với rất nhiều ứng dụng hiện nay
sử dụng công nghệ ajax, nó tạo khả năng để gọi các dịch vụ web từ trong javascript
của bạn.
Để thực hiện cross-domain, có một vài phương pháp phổ biến thông qua
JavaScript: Proxy, JSON, Flash.
1.1.1. AJAX
Hầu như chúng ta đều đã biết tới hay thậm chí đang sử dụng nhiều Gmail,
Google Map, .... hay các tiện ích tiện dụng của Flickr. Thì hẳn chúng ta nên biết rằng
những tính năng và cách thức tương tác với người dùng nhanh chóng, tiện lợi như vậy
mà các trang web này cung cấp chính là do AJAX.
AJAX không phải là một ngôn ngữ mới, nó là sự kết hợp của một loạt các công
nghệ khác nhau:
- XHTML + CSS với vai trò hiển thị thông tin.
- Mô hình tương tác và hiển thị động DOM.
- Trao đổi và truy cập/tác động lên thông tin sử dụng XML và XSLT.
- Nhận thông tin không đồng bộ với đối tượng XMLHttpRequest.
- JavaScript với vai trò kết hợp 4 công nghệ trên lại với nhau.
Với AJAX, một file JavaScript có thể liên kết trực tiếp với server mà không cần
tải lại trang web. Công nghệ AJAX đã tạo cho ứng dụng Internet nhỏ gọn hơn, nhanh
hơn và tương tác người dùng tốt hơn.
1.1.2. XMLHttpRequest
Đối tượng XMLHttpRequest là trung tâm của nhiều ứng dụng Ajax. Nó cũng là
đối tượng xác định một API cung cấp chức năng cho script phía client sự chuyển đổi
dữ liệu giữa client và server. Mặc dù không là một tính năng cần thiết, nó đã là một
dịch vụ Outlook web-mail cho phép mọi người có thể download email, xem lịch, ...
XmlHttpRequest chính là bí quyết của Ajax:
2
Hình 1. XmlHttpRequest với Ajax
Ứng dụng Ajax sử dụng mẫu đối tượng XMLHttpRequest có thể chỉ tạo request
tới cùng domain chúng định vị. Điều đó bởi vì chính sách bảo mật cross-domain của
JavaScript sandbox và nó có thể tránh khỏi tổn thương cross-site.
Đối tượng XMLHttpRequest không cho phép gọi các mã từ một domain trong
một web server khác. Hiện tại, mashup bao gồm việc gọi web service từ API được tạo
sẵn bởi các công ty như Google, Flickr, Yahoo, ... Nó có nghĩa rằng một lời gọi luôn
luôn phải tạo cross-domain, nếu không bạn không thể thực hiện chúng.
1.1.2. Chính sách Same-Origin
Trình duyệt sử dụng cookie như một phương pháp để xác thực người sử dụng
duy nhất, và để thực hiện giao diện phù hợp với người sử dụng đó. Để cookie có thể
được sử dụng với mục đích như vậy, trình duyệt phải giữ cho cookie bí mật với các
site khác. Do đó, cookie chỉ được gửi trong cùng một site đã thiết lập chúng, và chính
sách như vậy được biết đến gọi là ‘Chính sách Same-Origin’. Nó cũng có nghĩa rằng –
“chỉ site chứa một vài thông tin trong trình duyệt mới có thể đọc hoặc chỉnh sửa thông
tin đó”. Điều này có nghĩa là phần lớn không thể tải script từ một domain sang domain
khác. Ví dụ những hành động sau bị cấm:
- Sử dụng một XMLHttpRequest() đến một domain khác (thành phần cốt lõi
của Ajax).
- Truy cập hoặc sửa đổi DOM của một <frame> hoặc một <iframe> có một
thuộc tính src với domain khác.
- Truy cập hoặc sửa đổi window (hoặc tab) tại location khác.
3
Hạn chế của same-origin policy đối với JavaScript: sự điểu chỉnh truy cập đối
với inline frame (IFRAME) và đối tượng XMLHttpRequest.
- IFRAME: có thể sử dụng để download văn bản HTML phong phú bên ngoài
nguồn, nhưng nếu nội dung sang domain khác, trình duyệt sẽ không cho phép
JavaScript trong trang chứa đọc hoặc sửa đổi văn bản bên trong frame và
ngược lại.
- XMLHttpRequest: có thể sử dụng để download văn bản XML bất kỳ, nhưng
nó không thể tải file từ domain khác.
Như vậy trạng thái của cross-domain script không là ưu điểm cho phát triển
web. Mặc dù chính sách same-origin ngăn chặn những lỗi có thể xảy ra, nhưng nó
cũng lại là hạn chế để nâng cấp (thậm chí là giảm) cho các thế hệ tiếp theo của ứng
dụng web để phát triển.
1.1.3. Thẻ <script>
Same-origin không áp dụng cho các thẻ script (mặc dù nó áp dụng trên các file
JavaScript), script có thể được tải từ các domain khác và thực hiện với đặc quyền của
trang chứa chúng.
Những script từ xa này có thể được thêm vào trang một cách tự động để theo
dõi những ai truy cập vào trang web của bạn, và bạn phải chạy chúng để có hiệu lực.
Do đó, nó đảm bảo chỉ các file JavaScript hợp lệ mới có thể truy cập qua domain, và
tất cả các file khác sẽ gây lỗi.
1.1.4. Gadget Aggregator
Gadget aggregator như Microsoft Windows Live, Google Personalized
Homepage, thực hiện gộp các nội dung tương tác người dùng chọn từ các nguồn khác
nhau thành một trang đơn chính; và các Gadget bao gồm cả HTML và JavaScript, nó
được thiết kế để có thể chèn vảo trong một trang gadget aggregator. Các công cụ này
nằm trong một trang để cung cấp thông tin cần thiết tới người sử dụng, và nó ở phía
client-side của một vài web service.
1.2. Giới thiệu về Mashup
Trình duyệt web hiện nay đã được thiết kế để dễ dàng hơn và an toàn hơn trong
lấy dữ liệu từ nhiều nguồn vào trong một trang. Mashup là website hoặc ứng dụng web
mà phối hợp từ nhiều hơn một nguồn vào trong một trang hợp nhất. Cũng như bạn
hiểu mashup trong âm nhạc là một bản audio hay video được biên soạn từ những bản
ghi khác, thường là từ các phong cách nhạc khác nhau.
Ví dụ: Digg.com
4
Đối với phát triển web, mashup là một ứng dụng web phối hợp dữ liệu từ một
hoặc nhiều nguồn vào một bộ công cụ. Server tạo các request tới mỗi nguồn nội dung,
chuyển giao thông tin nó nhận được, và phối hợp kết quả trong một trang để gửi tới
trình duyệt.
Hình 2. Mashup nội dung từ nhiều nguồn.
Một ứng dụng Ajax + XML cho phép một trang web lấy dữ liệu từ server và tự
cập nhật sử dụng mã JavaScript như ở hình 1.2 dưới đây.
Hình 3. Dữ liệu tương tác hiển thị với Ajax
Với phương pháp này, người dùng có thể tương tác với nhiều giao diện người
dùng mà không cần tải lại toàn bộ trang. Server gửi một trang ban đầu tới trình duyệt,
nó gọi ngược lại tới server cho nội dung cần cập nhật.
Trong vài năm trở lại đây, việc mở các API từ một số nguồn như Google,
Yahoo, Last.fm, Flickr, YouTube và Amazon đã cho phép các nhà phát triển web thực
hiện trong các ứng dụng của họ, với một lời gọi tới các API cần thiết, các tính năng
như thêm ảnh, bản đồ, videos, ... và danh sách nhạc.
Để hiểu hơn về mashup, chúng ta hãy giả sử có 3 người trực tuyến tại: Google,
Amazon và eBay. Mashup của bạn sẽ cho phép mọi người tìm kiếm dữ liệu của
5
Amazon (ví dụ: giá những cuốn sách), so sánh chúng với trên trang eBay, và cuối
cùng, xác định người bán. Như vậy, bạn đã tới và xem xét 3 website khác nhau.
Hình 4. Khác nhau giữa ba website – Amazon, Google, eBay
Cách chúng làm việc
Hình 5. Mashup làm việc
Mashup là một thể loại thú vị của ứng dụng web. Sự kết hợp của các mô hình
dữ liệu, dịch vụ, ... là sự cung cấp cuối cùng cho sơ sở hạ tầng cần thiết để bắt đầu phát
triển ứng dụng có thể thúc đẩy và hợp nhất số lượng lớn thông tin có sẵn trên web.
Tạo một mashup, quá trình của chúng ta sẽ gồm các giai đoạn :
6
Hình 6. Tạo một mashup
Tiếp theo chúng ta sẽ tham khảo một số ứng dụng để xây dựng Web Mashup.
1.3. Một số ứng dụng để xây dựng Web Mahup
Thường các ứng dụng web dùng mashup kết hợp bản đồ với nhiều loại dữ liệu
từ nhiều trên web.
Hình 7. Ứng dụng cho mashup
Có một nhận xét rằng chúng đều sử dụng API. Và hầu hết các nhà cung cấp
dịch vụ API yêu cầu bạn phải có một developer/application ID, một tài khoản người
dùng hoặc dịch dịch vụ của họ, hoặc cả hai. Một vài dịch vụ cung cấp cho bạn một ID
cho một số ứng dụng khi bạn viết chương trình trong khi những cái khác yêu cầu bạn
tự tạo một ID cho mình với mỗi ứng dụng bạn tạo ra.
7
Trong khi quá trình đăng ký này nghe có vẻ phức tạp, nhưng thật sự nó chỉ tốn
một vài phút để hoàn thành.
Bạn hãy tham khảo xem một vài ứng dụng sau.
1.3.1. Sử dụng Google Maps API
Google Maps API là một ứng dụng sử dụng bản đồ trực tuyến và là một trong
những công nghệ mashup đặc trưng. Một số APIs bản đồ khác là Yahoo!Maps Web
một vị trí và vẽ lên bản đồ. Một điểm đánh dấu có thể được sử dụng để xác định vị trí,
và bạn có thể thêm các đoạn văn bản tới điểm đánh dấu đó.
Với Google Maps API, bạn có thể tìm các địa điểm (như khách sạn, trạm đổ
xăng, ...). Và ngày nay, cuộc cách mạng ngành bản đồ diễn ra mạnh với khả năng hiển
thị ảnh chụp vệ tinh chi tiết đến từng ngôi nhà.
Để đăng nhập cho một Google Maps API key, đầu tiên bạn hãy truy cập vào
Maps API key’.
Hình 8. Đăng nhập Google Maps API key.
Nếu bạn sử dụng Google Maps API trong một vài mashups được định vị tại các
server khác nhau, bạn có thể cần đến những key khác nhau. Đó cũng chính là key cho
phép bạn sử dụng API. Key này sẽ là duy nhất cho bạn, cho ứng dụng của bạn hoặc
thậm chí cho URL từ mashup của bạn được đưa ra dù nó hầu hết các key đều miễn phí.
Dữ liệu được sử dụng trong Google Maps thường được chuyển đổi đến địa chỉ
của điểm tung độ/hoành độ hoặc tại thành phố, ...
8
1.3.2. Sử dụng Amazon Web Services và Google Search APIs
Bạn có thể sử dụng API để tìm kiếm trong cơ sở dữ liệu của Amazon và thực
hiện một thẻ mua sắm trong hai cách khác nhau. Với Amazon, trọng tâm là trên dữ
liệu bạn truy cập không cần trực tiếp các lời gọi SQL.
Với Amazon, bạn cần truy cập tới Web Services API của API – nơi mà dữ liệu
Amazon được lưu trữ. Bạn cũng có thể cần thực hiện thẻ mua sắm và khả năng tìm
kiếm (và đạt lợi nhuận) bán hàng thông qua trang web của bạn. Dù đơn giản, nhưng nó
yêu cầu bạn tạo 3 tài khoản riêng biệt: một tài khoản Amazon, một tài khoản Amazon
Associate và một tài khoản Amazon Web Services (AWS).
Để có một tài khoản Amazon, bạn thật sự không phải làm gì cả, vì nó đơn giản
chỉ gồm địa chỉ e-mail và mật khẩu, cùng với những thông tin khác bạn cung cấp.
Để đăng kí cho một tài khoản Amazon Associate, ta tìm đến đường link
‘Associates Program’.
Hình 9. Đăng nhập cho tài khoản Amazon Associates
Để đăng kí cho một tài khoản AWS, truy cập vào website
9
Hình 10. Đăng nhập cho tài khoản AWS
Với việc sử dụng Google Search API, nó cho phép bạn đặt chế độ tìm kiếm trên
trang web của bạn và trong mashup giống như trong Goolg Map API vậy. Và sự thật
rằng, hiện nay rất nhiều các công ty như Google, Yahoo!, ... cung cấp một loạt các API
cho việc tìm kiếm, lập bản đồ, ... và các mục đich khác.
Hình 11. Google Search API
Bạn có thể cho phép người dùng tìm kiếm video, tin tức, sách, ... Như vậy là
bạn cần giao diện của Amazon và giao diện của Google Search.
10
1.3.3. Sử dụng Flickr API
Flickr API là một sự bổ sung tới APIs. Flickr là một dịch vụ chia sẻ ảnh (photo-
sharing). Nó cho phép bạn tải ảnh của bạn lên và xem những ảnh đã được tải lên khác.
Thông tin về mỗi bức ảnh có thể được sử dụng để bổ sung và tìm kiếm. Quan trọng
nhất, ảnh có thể có các tag – các từ mà người chủ bức ảnh cảm thấy có thể sử dụng để
nhận dạng bức ảnh. Bạn có thể tìm kiếm Flickr cho phù hợp với những tag xác định.
Bước đầu tiên bạn cũng truy cập để có được một API key. Sau đó, bạn có thể
khai thác APIs thể sử dụng API Explorer – cung cấp danh sách tất cả các biến và cho
phép bạn nhập dữ liệu tới các biến đó.
Hình 12. Đăng nhập cho tài khoản Flickr API
Lần đầu tiên sử dụng Flickr, bạn cũng cần phải có được một Yahoo! ID để đạt
được quyền truy cập. Trong Mashup phần mềm và thành phần của Web 2.0 được cấu
trúc lại, liên kết lại và đạt được một sự thay đổi mẫu mã, thì Flickr bây giờ là một
thành phần của Yahoo!
Những thông tin ở phía trái của trang web rất hữu ích, nhưng nó là tham chiếu
của API phía bên phải – rất quan trọng. API routines được nhóm lại theo các loại. Như
vậy, để xây dựng một mashup, bạn cần di chuyển xuống tới các phần hình ảnh và nhấn
tới flickr.photos.search để cho phép bạn tìm kiếm danh sách ảnh.
11
Hình 13. Flickr photos search
1.3.4. Sử dụng ebay API
eBay API là một ứng dụng phức tạp nhất. Nó đã được mở để third-party phát
triển trong một thời gian dài và quy trình (đấu giá) cũng là phức tạp hơn quy trình mua
và bán thông thường cho một mức giá cố định.
Tại eBay API, bạn sẽ tìm kiếm một mục nào đó sử dụng cả giao diện SOAP và
giao diện REST. Và kết quả sẽ được hiển thị trên một bản đồ Google dựa vào vị trí của
người bán.
Để bắt đầu truy cập tới eBay APIs, bạn đi tới eBay Developer Center tại
web, và sau đó đăng nhập.
Hình 14. Đăng nhập cho tài khoản Flickr API
12
Mashup trong eBay cho phép bạn tìm kiếm các mục sử dụng các từ khóa. Khi
tìm thấy thấy kết quả, nó trả về một văn bản XML. Văn bản này chứa các tiêu đề mỗi
mục và giá của chúng cũng như vị trí người bán. Các mục này sau đó được ánh xạ vào
một bản đồ của Google với sự đánh dấu được cung cấp thông tin về đường liên kết tới
trang eBay.
Dữ liệu lấy từ eBay và cũng sử dụng bản đồ Google API.
13
CHƯƠNG II. CROSS-DOMAIN AJAX VÀ
CÁC GIẢI PHÁP THỰC HIỆN TRONG AJAX
Trong khi mashup bật trình duyệt trong hệ thống đa người dùng cùng với tên
miền không tin cậy lẫn nhau như giữa những người sử dụng, thì các trình duyệt ngày
nay đã đưa ra cho các nhà phát triển web không đủ lý thuyết để tích hợp nội dung từ
nhiều domain: hoặc là cô lập các website không có sự liên lạc hoặc là liên lạc không
có sự kiểm soát với sự không cô lập.
Và khi Ajax xuất hiện trong thế giới ứng dụng web, những nhà phát triển đã
muốn giải quyết một vấn đề trên khi mà cả Firefox và IE(Internet Explorer) đều không
cho phép, đó chính là việc gửi một request đến một domain khác với domain hiện
hành. Vấn đề đó chính là vấn đề Cross-domain Ajax.
Và, cho đến hiện nay, có một vài phương pháp phổ biến để thực hiện gọi cross
domain trong Ajax thông qua JavaScript: Proxy, JSON, Flash.
2.1. Cross domain proxy
Đây là phương pháp phổ biến nhất, thay vì tạo lời gọi Ajax tới một domain
khác, bạn tạo lời gọi tới proxy của bạn, proxy sẽ chuyển cuộc gọi tới domain bên ngoài
(ví dụ: Yahoo! Web Services) và lại chuyển dữ liệu trở lại cho ứng dụng client. Bởi vì
sự kết nối được tạo tới server của bạn, và dữ liệu cũng được trả lại từ server của bạn,
do đó không có sự lo ngại về bảo mật.
Hình 15. Cross-domain Proxy
Tạo dữ liệu xuất hiện trong client để dữ liệu ‘same-origin’, do đó trình duyệt
cho phép dữ liệu có thể đọc trở lại một IFRAME, hoặc thông thường hơn, một
XMLHttpRequest.
14
Ưu điểm: bạn có nhiều sự kiểm soát toàn bộ quá trình, bạn có thể phân tích dữ
liệu của server từ xa. Nếu có xảy ra lỗi, bạn có thể xử lý nó. Và cuối cùng bạn có thể
ghi lại tất cả các cuộc gọi từ xa, theo dõi cuộc gọi thành công, hay lỗi.
Hạn chế : tăng độ trễ của kết nối qua proxy server của mashup. Chi phí băng thông
cho mashup author cũng tăng, đặc biệt nếu kích thước của mã mashup là nhỏ so với số
lượng của dữ liệu cross-domain được ủy quyền (do thực hiện từ phía server-side).
2.2. Cross domain JSON
XMLHttpRequest có một phương thức bảo mật không đủ để hỗ trợ cho thế hệ
tiếp theo của ứng dụng web. JSONRequest được đề xuất như một browser service cho
phép dữ liệu trao đổi hai chiều với dữ liệu JSON server. Nó trao đổi dữ liệu giữa các
script trên các site với JSON server trong trang web. Nó được hi vọng rằng trình duyệt
sẽ được xây dựng những tính năng trong sản phẩm của họ để làm cho những ưu điểm
trong ứng dụng web phát triển.
Trong thế hệ tiếp theo của ứng dụng web sẽ có nhiều dữ liệu hơn. Chúng ta
muốn đi tới một server, hay bất kì server nào đó và trao đổi dữ liệu, thì
XMLHttpRequest đã không đạt được. Đó là một hạn chế trong mô hình bảo mật.
XMLHttpRequest bị ràng buộc bởi chính sách Same Origin. Ràng buộc trung
gian này chỉ cho kết nối tới server mà đã cung cấp trang cơ sở.
Hình 16. Hạn chế của cross domain XMLHttpRequest
Chính sách Same Origin làm vô hiệu hóa những cuộc tấn công từ bên ngoài,
nhưng nó cũng chống lại mảng lớn hơn việc sử dụng hợp pháp. Nó nên có khả năng
15
cho một script trong trang truy cập đến các server khác không làm hại đến bảo mật của
người sử dụng hoặc tổ chức đó.
JSON là một dạng trao đổi dữ liệu dựa trên tập JavaScript an toàn. JSON có thể
đại diện cho cấu trúc dữ liệu đơn giản hoặc phức tạp. JSON không đại diện cho hàm
hoặc biểu thức. Nó là một dữ liệu rất chặt chẽ, nó có quy tắc cú pháp riêng, do vậy bạn
có thể dễ dàng nhận biết đó có phải là tài liệu JSON không.
Hình 17. Của cross domain JSON
JSONRequest là một đối tượng JavaScript toàn cục, nó cung cấp ba method:
post, get, cancel.
2.2.1. JSONRequest.post
JSONRequest.post là một HTTP post của chuỗi đối tượng hoặc mảng
JavaScript, nhận những phản hồi, và phân tích chúng thành giá trị JavaScript. Nếu
phân tích thành công, nó sẽ trả lại giá trị của script request. Khi tạo request, không có
chứng thực hay cookie được gửi (nếu gửi kèm cookie, request sẽ bị lỗi).
JSONRequest service chỉ có thể sử dụng để gửi và nhận giá trị JSON-encoded.
JSONRequest chứa bốn tham số:
- url (string) : URL để POST tới.
- send (object) : đối tượng JavaScript hoặc mảng để gửi như dữ liệu POST.
- done (function(requestNumber, value, exception)) : Hàm được gọi khi
request được hoàn thành. Nếu request thành công, hàm sẽ nhận số request
16
‘requestNumber’ và giá trị ‘value’ trả về. Nếu nó không thành công, nó sẽ
nhận số request ‘’ và một đối tượng ngoại lệ ‘exception’.
- timeout (number) : số mili giây để đợi cho phản hồi.
2.2.2 JSONRequest.get
JSONRequest.get là một HTTP get request, lấy phản hồi, và phân tích chúng
thành một giá trị JavaScipt. Nếu phân tích thành công, nó sẽ trả lại giá trị script đã
request. Khi request, không có chứng thực và cookie được gửi.
Và như trên, nó cũng chỉ được sử dụng với giá trị JSON-encoded.
JSONRequest.get cần ba tham số:
- url (string) : URL để GET về.
- done (function(requestNumber, value, exeption)): Hàm được gọi khi request
hoàn thành. Nếu request thành công, hàm sẽ nhận số request
‘requestNumber’ và giá trị ‘value’ trả về. Nếu nó không thành công, nó sẽ
nhận số ‘requestNumber’ và một đối tượng ngoại lệ ‘exeption’.
- timeout (number): số mili giây để đợi cho sự phản hồi.
2.2.3. JSONRequest.cancel
Một request có thể bị xóa bởi JSONRequest.cancel với số request. Nó không
trả lại gì cả. Không có gì đảm bảo rằng yêu cầu sẽ không được gửi tới server khi lệnh
xóa request được tạo:
JSONRequest.cancel(requestNumber);
- Nếu request vẫn trong hàng đợi, nó sẽ bị xóa từ hàng đợi.
- Nếu request trong tiến trình, một sự thử sẽ được tạo để loại bỏ nó.
- Nếu request không được tìm thấy, thì lệnh trên sẽ được bỏ qua.Khi thông báo
được xóa thành công, hàm callback ‘done’ của request sẽ được gọi với một
thông điệp ngoại lệ của “cancelled”.
2.2.4. Bảo mật
- JSONRequest có một vài tính năng cho phép nó được miễn chính sách Same
Origin.
• JSONRequest không gửi hoặc nhận cookie hoặc password trong HTTP
headers. Điều này tránh trường hợp lỗi chứng thực.
• JSONRequest chỉ làm việc với tài liệu JSON. Một request sẽ bị lỗi nếu
server không phản hồi tới POST với tài liệu JSON.
17
• Phản hồi sẽ bị từ chối trừ phi chúng chứa một loại nội dung JSONRequest.
Điều này làm cho nó không thể sử dụng JSONRequest để lấy dữ liệu từ
server không an toàn.
• JSONRequest có rất ít dữ liệu lỗi.
• JSONRequest tích lũy độ trễ ngẫu nhiên trước khi hành động trên các
request mới khi các request trước đó bị lỗi. Điều này làm vô tác dụng tấn
công phân tích thời gian và tấn công từ chối dịch vụ. JSONRequest chỉ làm
một việc: nó trao đổi dữ liệu giữa các script tại trang web với JSON server
tại web.
- JSONRequest cho phép kết nối, nhưng với một số hạn chế:
• Content-type theo cả hai hướng application/jsonrequest.
• Dữ liệu thân POST sẽ trong định dạng JSON.
• Sự phản hồi dữ liệu sẽ trong định dạng JSON.
• Kí tự mã hóa theo hai hướng là UTF-8.
2.2.5. Hoạt động của JSON
Hình 18. Hoạt động của JSON
Bước2: Trang HTML được lấy về ở bước1 chứa JavasCript có nhiệm vụ trực
tiếp browser để yêu cầu file JavaScript ở một HTTP server thứ hai trên domain:
18
Bước3: JavaScript lấy về từ bước2 được thực thi ở browser, nó thay đổi các
thành phần của trang web và có liên kết tới các JavaScript khác.
Bước4: JavaScript mới này sẽ gọi và yêu cầu được cung cấp dịch vụ. Sau khi
yêu cầu được thực hiện, server sẽ gửi trả lại hàm JavaScript callback với đối tượng
JSON và các tham số của nó. Hàm Callback làm cho mối quan hệ giữa JSON client và
dịch vụ trở nên linh hoạt hơn.
Bước5: Hàm Callback được thực thi và nội dung trang web được cập nhật.
2.3. Cross domain sử dụng Flash
Phương pháp này ít phổ biến hơn phương pháp proxy, nó khai khác khả năng
truyền thông cross-domain mà flash có thể đưa ra. Giống như JavaScript, Flash chỉ
cho phép request tới cùng domain, nhưng nó cũng cho phép request tới domain third
party mà cho phép nó sử dụng file crossdomain.xml.
Nếu bạn làm việc rất nhiều với các file Flash, thì một số phiên bản cũ của Flash
yêu cầu chính sách để truyền thông giữa các domain. Ví dụ, nếu bạn có một file đang
tải nội dung từ domain khác, bạn sẽ gặp phải lỗi.
Hình 19. Lỗi 2044
File crossdomai.xml là một file XML đơn giản đưa cho Flash Player quyền để
truy cập dữ liệu từ domain khác, nó được đặt tại root của webserver:
19
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM
policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>
Như bạn chú ý ở trên, dấu hoa thị (*) có nghĩa rằng tất cả.
Hoặc để tạo một số giới hạn
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM
policy.dtd">
<cross-domain-policy>
ports="25" />
</cross-domain-policy>
2.4. Subspace
Subspace - một cơ chế truyền thông đa miền, cho phép truyền thông một cách
hiệu quả qua các domain mà không mất tính bảo mật – có thể cung cấp sự truyền
thông tin cậy như ban đầu cho web mashup.
Sử dụng JavaScript, những tính năng bảo mật khác nhau được áp dụng trong
những data-passing phare khác nhau, trong các trình duyệt khác nhau:
Cross-subdomain communication.
Cross-domain code Authorization.
Cross-domain frame access.
- Truyền thông cross-subdomain
Đối với JavaScript, một site được định danh như là bộ ba: protocol, hostname,
port, ví dụ:
=> site khác
Sử dụng JavaScript, bạn có thể phân tách dữ liệu giữa các domain có cùng một
hậu tố. Nếu hai domain muốn chia sẻ giao tiếp một hậu tố thống nhất, chúng ta sử
20
dụng thuộc tính JavaScript document.domain để cung cấp sự truy cập đầy đủ tới mỗi
domain. Ví dụ:
a.example.com và b.example.com có thể được thay đổi biến document.domain
thành example.com, cho phép chúng chuyển dữ liệu và mã JavaScript khi chạy.
Hạn chế: hậu tố được thay đổi không quá dài để thành ‘top level domain name’
(VD: ‘.com’) ngăn sự truyền thông qua domain bất kì.
- Sự chấp nhận mã cross-domain
Chính sách same-origin ngăn chặn các mã khỏi việc chuyển giữa các domain.
Một hàm được định nghĩa trong một domain sẽ không được gọi bởi mã trong domain
khác, do đó không có sự mơ hồ về domain đã thực hiện hoạt động đó khi sử dụng bảo
mật same-origin để kiểm tra.
Closure: hàm được định nghĩa trong thân hàm khác, tham chiếu tới biến trong
vùng khi nó được tạo, chứ không phải khi nó được gọi.
Bằng việc cài đặt biến document.domain, một trang web có thể chuyển tiếp một
closure tới một frame trong những domain khác. Có hai lựa chọn:
Authorization động: closure kế thừa các đặc quyền bảo mật của trang mà đã gọi
nó. Phương pháp tiếp cận này tương ứng cho đường link kiểm soát của ngăn xếp gọi.
thi hành tính năng site1 và kiểm soát nó.
Authorization tĩnh: closure kế thừa quyền bảo mật của trang nơi mà closure được
tạo. Sự tiếp cận này có thể được thực hiện bởi đường link truy cập của hàm thay thế link
duyệt sẽ gọi tính năng site2 đã được thi hành trên toàn bộ tài liệu.
Authorization động có thể được mô phỏng trong một trình duyệt authorization
tĩnh bởi việc gọi eval dựa trên dữ liệu chuỗi nhận từ những site khác nhưng ngược lại
thì không đúng: authorization động không thể dễ dàng mô phỏng trong trình duyệt
authorization tĩnh.
- Truy cập frame cross-domain
Có một vài chính sách browser :
• Quyền (Firefox và Safari)
• Hạn chế (Opera)
• Khả năng cấu hình, “Yes” là mặc định (IE6)
• Cấu hình nhưng bị hạn chế, “No” là mặc định (IE7)
21
2.4.1. Subdomain
Một vài site muốn loại bỏ ‘www’ ra khỏi subspace của mình, ví dụ
mashup.com , có thể chúng ta coi như cùng một tên và thật sự, chúng cùng chỉ tới một
nơi. Nhưng để gọi trong một Ajax, nó xét đến domain. Do đó, nếu bạn tạo một lời gọi
Ajax tới cùng một server, không nên đặt mã domain như một thành phần mà như một
đường dẫn.
Hạn chế của Subspace: frame có thể khởi động một sự tấn công denial-of-
service trên trình duyệt. Ví dụ, một web service không đúng có thể định hướng trình
duyệt xa mashup site, hoặc hiển thị một chuỗi vô tận hộp báo động, ngăn người sử
dụng không sử dụng được site.
Một khả năng có thể khác là nguồn dữ liệu hoặc gadget không tin cậy có thể
xuất hiện một cửa sổ mới yêu cầu người sử dụng cho nhãn quyền của họ. Vì đó, nó là
quan trọng để subdomain được đặt tên và người sử dụng có khả năng xác định rõ ràng
web service đã kiểm soát nó
2.4.2. Đơn Web Service
- Cài đặt Phrase
và
webservice.mashup.com, thực hiện việc giao thức cài đặt cái đưa ra trang cả hai
domain cùng truy cập tới đối tượng subspace javascript.
Giao thức cài đặt dưới đây (miêu tả từ hình 2.6) là được hiện chỉ một lần khi trang
đầu tiên được tải, và không cần thiết để khởi động lại khi cần dữ liệu yêu cầu nhiều hơn.
Mediator frame là một subdomain của frame chính và nó giao tiếp dễ dàng
(document.domain); Một frame khác được tạo dưới mediator frame và giữ dữ liệu được gửi
từ unstrusted website. Frame này giao tiếp với mediator frame nhưng không phải là frame
chính; Mediator frame có thể giao tiếp với cả hai, unstrusted frame và top frame-frame chính.
Hình 20. Gọi ra dữ liệu từ domain đơn unstrusted 3rd-party.
22
Tải về để xem bản đầy đủ
43 trang
14/05/2025
150
Bạn đang xem 30 trang mẫu của tài liệu "Khóa luận Cross-domain Ajax cho các ứng dụng web mashup", để tải tài liệu gốc về máy hãy click vào nút Download ở trên.
File đính kèm:
- khoa_luan_cross_domain_ajax_cho_cac_ung_dung_web_mashup.pdf
