HTMLLinkElement.cpp 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475
  1. /*
  2. * Copyright (c) 2018-2023, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2021, the SerenityOS developers.
  4. * Copyright (c) 2021, Sam Atkins <atkinssj@serenityos.org>
  5. * Copyright (c) 2023, Srikavin Ramkumar <me@srikavin.me>
  6. *
  7. * SPDX-License-Identifier: BSD-2-Clause
  8. */
  9. #include <AK/ByteBuffer.h>
  10. #include <AK/Debug.h>
  11. #include <AK/URL.h>
  12. #include <LibTextCodec/Decoder.h>
  13. #include <LibWeb/CSS/Parser/Parser.h>
  14. #include <LibWeb/DOM/Document.h>
  15. #include <LibWeb/DOM/Event.h>
  16. #include <LibWeb/Fetch/Fetching/Fetching.h>
  17. #include <LibWeb/Fetch/Infrastructure/FetchAlgorithms.h>
  18. #include <LibWeb/Fetch/Infrastructure/HTTP/Requests.h>
  19. #include <LibWeb/Fetch/Infrastructure/HTTP/Responses.h>
  20. #include <LibWeb/HTML/EventNames.h>
  21. #include <LibWeb/HTML/HTMLLinkElement.h>
  22. #include <LibWeb/HTML/PotentialCORSRequest.h>
  23. #include <LibWeb/HTML/TraversableNavigable.h>
  24. #include <LibWeb/Infra/CharacterTypes.h>
  25. #include <LibWeb/Loader/ResourceLoader.h>
  26. #include <LibWeb/Page/Page.h>
  27. #include <LibWeb/Platform/ImageCodecPlugin.h>
  28. namespace Web::HTML {
  29. HTMLLinkElement::HTMLLinkElement(DOM::Document& document, DOM::QualifiedName qualified_name)
  30. : HTMLElement(document, move(qualified_name))
  31. {
  32. }
  33. HTMLLinkElement::~HTMLLinkElement() = default;
  34. void HTMLLinkElement::initialize(JS::Realm& realm)
  35. {
  36. Base::initialize(realm);
  37. set_prototype(&Bindings::ensure_web_prototype<Bindings::HTMLLinkElementPrototype>(realm, "HTMLLinkElement"));
  38. }
  39. void HTMLLinkElement::inserted()
  40. {
  41. HTMLElement::inserted();
  42. // FIXME: Handle alternate stylesheets properly
  43. if (m_relationship & Relationship::Stylesheet && !(m_relationship & Relationship::Alternate)) {
  44. // https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet:fetch-and-process-the-linked-resource
  45. // The appropriate times to fetch and process this type of link are:
  46. // - When the external resource link is created on a link element that is already browsing-context connected.
  47. // - When the external resource link's link element becomes browsing-context connected.
  48. fetch_and_process_linked_resource();
  49. }
  50. // FIXME: Follow spec for fetching and processing these attributes as well
  51. if (m_relationship & Relationship::Preload) {
  52. // FIXME: Respect the "as" attribute.
  53. LoadRequest request;
  54. request.set_url(document().parse_url(deprecated_attribute(HTML::AttributeNames::href)));
  55. set_resource(ResourceLoader::the().load_resource(Resource::Type::Generic, request));
  56. } else if (m_relationship & Relationship::DNSPrefetch) {
  57. ResourceLoader::the().prefetch_dns(document().parse_url(deprecated_attribute(HTML::AttributeNames::href)));
  58. } else if (m_relationship & Relationship::Preconnect) {
  59. ResourceLoader::the().preconnect(document().parse_url(deprecated_attribute(HTML::AttributeNames::href)));
  60. } else if (m_relationship & Relationship::Icon) {
  61. auto favicon_url = document().parse_url(href());
  62. auto favicon_request = LoadRequest::create_for_url_on_page(favicon_url, document().page());
  63. set_resource(ResourceLoader::the().load_resource(Resource::Type::Generic, favicon_request));
  64. }
  65. }
  66. bool HTMLLinkElement::has_loaded_icon() const
  67. {
  68. return m_relationship & Relationship::Icon && resource() && resource()->is_loaded() && resource()->has_encoded_data();
  69. }
  70. void HTMLLinkElement::attribute_changed(DeprecatedFlyString const& name, DeprecatedString const& value)
  71. {
  72. HTMLElement::attribute_changed(name, value);
  73. // 4.6.7 Link types - https://html.spec.whatwg.org/multipage/links.html#linkTypes
  74. if (name == HTML::AttributeNames::rel) {
  75. m_relationship = 0;
  76. // Keywords are always ASCII case-insensitive, and must be compared as such.
  77. auto lowercased_value = value.to_lowercase();
  78. // To determine which link types apply to a link, a, area, or form element,
  79. // the element's rel attribute must be split on ASCII whitespace.
  80. // The resulting tokens are the keywords for the link types that apply to that element.
  81. auto parts = lowercased_value.split_view(Infra::is_ascii_whitespace);
  82. for (auto& part : parts) {
  83. if (part == "stylesheet"sv)
  84. m_relationship |= Relationship::Stylesheet;
  85. else if (part == "alternate"sv)
  86. m_relationship |= Relationship::Alternate;
  87. else if (part == "preload"sv)
  88. m_relationship |= Relationship::Preload;
  89. else if (part == "dns-prefetch"sv)
  90. m_relationship |= Relationship::DNSPrefetch;
  91. else if (part == "preconnect"sv)
  92. m_relationship |= Relationship::Preconnect;
  93. else if (part == "icon"sv)
  94. m_relationship |= Relationship::Icon;
  95. }
  96. }
  97. // FIXME: Handle alternate stylesheets properly
  98. if (m_relationship & Relationship::Stylesheet && !(m_relationship & Relationship::Alternate)) {
  99. if (name == HTML::AttributeNames::disabled && m_loaded_style_sheet)
  100. document().style_sheets().remove_sheet(*m_loaded_style_sheet);
  101. // https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet:fetch-and-process-the-linked-resource
  102. // The appropriate times to fetch and process this type of link are:
  103. if (
  104. // AD-HOC: When the rel attribute changes
  105. name == AttributeNames::rel ||
  106. // - When the href attribute of the link element of an external resource link that is already browsing-context connected is changed.
  107. name == AttributeNames::href ||
  108. // - When the disabled attribute of the link element of an external resource link that is already browsing-context connected is set, changed, or removed.
  109. name == AttributeNames::disabled ||
  110. // - When the crossorigin attribute of the link element of an external resource link that is already browsing-context connected is set, changed, or removed.
  111. name == AttributeNames::crossorigin
  112. // FIXME: - When the type attribute of the link element of an external resource link that is already browsing-context connected is set or changed to a value that does not or no longer matches the Content-Type metadata of the previous obtained external resource, if any.
  113. // FIXME: - When the type attribute of the link element of an external resource link that is already browsing-context connected, but was previously not obtained due to the type attribute specifying an unsupported type, is removed or changed.
  114. ) {
  115. fetch_and_process_linked_resource();
  116. }
  117. }
  118. }
  119. void HTMLLinkElement::resource_did_fail()
  120. {
  121. dbgln_if(CSS_LOADER_DEBUG, "HTMLLinkElement: Resource did fail. URL: {}", resource()->url());
  122. if (m_relationship & Relationship::Preload) {
  123. dispatch_event(*DOM::Event::create(realm(), HTML::EventNames::error));
  124. }
  125. }
  126. void HTMLLinkElement::resource_did_load()
  127. {
  128. VERIFY(resource());
  129. if (m_relationship & Relationship::Icon) {
  130. resource_did_load_favicon();
  131. m_document_load_event_delayer.clear();
  132. }
  133. if (m_relationship & Relationship::Preload) {
  134. dispatch_event(*DOM::Event::create(realm(), HTML::EventNames::load));
  135. }
  136. }
  137. // https://html.spec.whatwg.org/multipage/semantics.html#create-link-options-from-element
  138. HTMLLinkElement::LinkProcessingOptions HTMLLinkElement::create_link_options()
  139. {
  140. // 1. Let document be el's node document.
  141. auto& document = this->document();
  142. // 2. Let options be a new link processing options with
  143. LinkProcessingOptions options;
  144. // FIXME: destination the result of translating the state of el's as attribute
  145. // crossorigin the state of el's crossorigin content attribute
  146. options.crossorigin = cors_setting_attribute_from_keyword(
  147. has_attribute(AttributeNames::crossorigin) ? String::from_deprecated_string(get_attribute(AttributeNames::crossorigin)).release_value_but_fixme_should_propagate_errors()
  148. : Optional<String> {});
  149. // FIXME: referrer policy the state of el's referrerpolicy content attribute
  150. // FIXME: source set el's source set
  151. // base URL document's URL
  152. options.base_url = document.url();
  153. // origin document's origin
  154. options.origin = document.origin();
  155. // environment document's relevant settings object
  156. options.environment = &document.relevant_settings_object();
  157. // policy container document's policy container
  158. options.policy_container = document.policy_container();
  159. // document document
  160. options.document = &document;
  161. // FIXME: cryptographic nonce metadata The current value of el's [[CryptographicNonce]] internal slot
  162. // 3. If el has an href attribute, then set options's href to the value of el's href attribute.
  163. if (has_attribute(AttributeNames::href))
  164. options.href = String::from_deprecated_string(get_attribute(AttributeNames::href)).release_value_but_fixme_should_propagate_errors();
  165. // 4. If el has an integrity attribute, then set options's integrity to the value of el's integrity content attribute.
  166. if (has_attribute(AttributeNames::integrity))
  167. options.integrity = String::from_deprecated_string(get_attribute(AttributeNames::integrity)).release_value_but_fixme_should_propagate_errors();
  168. // 5. If el has a type attribute, then set options's type to the value of el's type attribute.
  169. if (has_attribute(AttributeNames::type))
  170. options.type = String::from_deprecated_string(get_attribute(AttributeNames::type)).release_value_but_fixme_should_propagate_errors();
  171. // FIXME: 6. Assert: options's href is not the empty string, or options's source set is not null.
  172. // A link element with neither an href or an imagesrcset does not represent a link.
  173. // 7. Return options.
  174. return options;
  175. }
  176. // https://html.spec.whatwg.org/multipage/semantics.html#create-a-link-request
  177. JS::GCPtr<Fetch::Infrastructure::Request> HTMLLinkElement::create_link_request(HTMLLinkElement::LinkProcessingOptions const& options)
  178. {
  179. // 1. Assert: options's href is not the empty string.
  180. // FIXME: 2. If options's destination is not a destination, then return null.
  181. // 3. Parse a URL given options's href, relative to options's base URL. If that fails, then return null. Otherwise, let url be the resulting URL record.
  182. auto url = options.base_url.complete_url(options.href);
  183. if (!url.is_valid())
  184. return nullptr;
  185. // 4. Let request be the result of creating a potential-CORS request given url, options's destination, and options's crossorigin.
  186. auto request = create_potential_CORS_request(vm(), url, options.destination, options.crossorigin);
  187. // 5. Set request's policy container to options's policy container.
  188. request->set_policy_container(options.policy_container);
  189. // 6. Set request's integrity metadata to options's integrity.
  190. request->set_integrity_metadata(options.integrity);
  191. // 7. Set request's cryptographic nonce metadata to options's cryptographic nonce metadata.
  192. request->set_cryptographic_nonce_metadata(options.cryptographic_nonce_metadata);
  193. // 8. Set request's referrer policy to options's referrer policy.
  194. request->set_referrer_policy(options.referrer_policy);
  195. // 9. Set request's client to options's environment.
  196. request->set_client(options.environment);
  197. // 10. Return request.
  198. return request;
  199. }
  200. // https://html.spec.whatwg.org/multipage/semantics.html#fetch-and-process-the-linked-resource
  201. void HTMLLinkElement::fetch_and_process_linked_resource()
  202. {
  203. default_fetch_and_process_linked_resource();
  204. }
  205. // https://html.spec.whatwg.org/multipage/semantics.html#default-fetch-and-process-the-linked-resource
  206. void HTMLLinkElement::default_fetch_and_process_linked_resource()
  207. {
  208. // https://html.spec.whatwg.org/multipage/semantics.html#the-link-element:attr-link-href-4
  209. // If both the href and imagesrcset attributes are absent, then the element does not define a link.
  210. // FIXME: Support imagesrcset attribute
  211. if (!has_attribute(AttributeNames::href) || href().is_empty())
  212. return;
  213. // 1. Let options be the result of creating link options from el.
  214. auto options = create_link_options();
  215. // 2. Let request be the result of creating a link request given options.
  216. auto request = create_link_request(options);
  217. // 3. If request is null, then return.
  218. if (request == nullptr) {
  219. return;
  220. }
  221. // FIXME: 4. Set request's synchronous flag.
  222. // 5. Run the linked resource fetch setup steps, given el and request. If the result is false, then return.
  223. if (!linked_resource_fetch_setup_steps(*request))
  224. return;
  225. // 6. Set request's initiator type to "css" if el's rel attribute contains the keyword stylesheet; "link" otherwise.
  226. if (m_relationship & Relationship::Stylesheet) {
  227. request->set_initiator_type(Fetch::Infrastructure::Request::InitiatorType::CSS);
  228. } else {
  229. request->set_initiator_type(Fetch::Infrastructure::Request::InitiatorType::Link);
  230. }
  231. // 7. Fetch request with processResponseConsumeBody set to the following steps given response response and null, failure, or a byte sequence bodyBytes:
  232. Fetch::Infrastructure::FetchAlgorithms::Input fetch_algorithms_input {};
  233. fetch_algorithms_input.process_response_consume_body = [this, hr = options](auto response, auto body_bytes) {
  234. // FIXME: If the response is CORS cross-origin, we must use its internal response to query any of its data. See:
  235. // https://github.com/whatwg/html/issues/9355
  236. response = response->unsafe_response();
  237. // 1. Let success be true.
  238. bool success = true;
  239. // 2. If either of the following conditions are met:
  240. // - bodyBytes is null or failure; or
  241. // - response's status is not an ok status,
  242. if (body_bytes.template has<Empty>() || body_bytes.template has<Fetch::Infrastructure::FetchAlgorithms::ConsumeBodyFailureTag>() || !Fetch::Infrastructure::is_ok_status(response->status())) {
  243. // then set success to false.
  244. success = false;
  245. }
  246. // FIXME: 3. Otherwise, wait for the link resource's critical subresources to finish loading.
  247. // 4. Process the linked resource given el, success, response, and bodyBytes.
  248. process_linked_resource(success, response, body_bytes);
  249. };
  250. Fetch::Fetching::fetch(realm(), *request, Fetch::Infrastructure::FetchAlgorithms::create(vm(), move(fetch_algorithms_input))).release_value_but_fixme_should_propagate_errors();
  251. }
  252. // https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet:process-the-linked-resource
  253. void HTMLLinkElement::process_stylesheet_resource(bool success, Fetch::Infrastructure::Response const& response, Variant<Empty, Fetch::Infrastructure::FetchAlgorithms::ConsumeBodyFailureTag, ByteBuffer> body_bytes)
  254. {
  255. // 1. If the resource's Content-Type metadata is not text/css, then set success to false.
  256. auto extracted_mime_type = response.header_list()->extract_mime_type().release_value_but_fixme_should_propagate_errors();
  257. if (!extracted_mime_type.has_value() || extracted_mime_type->essence() != "text/css") {
  258. success = false;
  259. }
  260. // FIXME: 2. If el no longer creates an external resource link that contributes to the styling processing model,
  261. // or if, since the resource in question was fetched, it has become appropriate to fetch it again, then return.
  262. // 3. If el has an associated CSS style sheet, remove the CSS style sheet.
  263. if (m_loaded_style_sheet) {
  264. document().style_sheets().remove_sheet(*m_loaded_style_sheet);
  265. m_loaded_style_sheet = nullptr;
  266. }
  267. // 4. If success is true, then:
  268. if (success) {
  269. // 1. Create a CSS style sheet with the following properties:
  270. // type
  271. // text/css
  272. // location
  273. // The resulting URL string determined during the fetch and process the linked resource algorithm.
  274. // owner node
  275. // element
  276. // media
  277. // The media attribute of element.
  278. // title
  279. // The title attribute of element, if element is in a document tree, or the empty string otherwise.
  280. // alternate flag
  281. // Set if the link is an alternative style sheet and element's explicitly enabled is false; unset otherwise.
  282. // origin-clean flag
  283. // Set if the resource is CORS-same-origin; unset otherwise.
  284. // parent CSS style sheet
  285. // owner CSS rule
  286. // null
  287. // disabled flag
  288. // Left at its default value.
  289. // CSS rules
  290. // Left uninitialized.
  291. //
  292. // The CSS environment encoding is the result of running the following steps: [CSSSYNTAX]
  293. // 1. If the element has a charset attribute, get an encoding from that attribute's value. If that succeeds, return the resulting encoding. [ENCODING]
  294. // 2. Otherwise, return the document's character encoding. [DOM]
  295. DeprecatedString encoding;
  296. if (auto charset = deprecated_attribute(HTML::AttributeNames::charset); !charset.is_null())
  297. encoding = charset;
  298. else
  299. encoding = document().encoding_or_default().to_deprecated_string();
  300. auto decoder = TextCodec::decoder_for(encoding);
  301. if (!decoder.has_value()) {
  302. // If we don't support the encoding yet, let's error out instead of trying to decode it as something it's most likely not.
  303. dbgln("FIXME: Style sheet encoding '{}' is not supported yet", encoding);
  304. dispatch_event(*DOM::Event::create(realm(), HTML::EventNames::error));
  305. } else {
  306. auto const& encoded_string = body_bytes.get<ByteBuffer>();
  307. auto maybe_decoded_string = TextCodec::convert_input_to_utf8_using_given_decoder_unless_there_is_a_byte_order_mark(*decoder, encoded_string);
  308. if (maybe_decoded_string.is_error()) {
  309. dbgln("Style sheet {} claimed to be '{}' but decoding failed", response.url().value_or(AK::URL()), encoding);
  310. dispatch_event(*DOM::Event::create(realm(), HTML::EventNames::error));
  311. } else {
  312. auto const decoded_string = maybe_decoded_string.release_value();
  313. m_loaded_style_sheet = parse_css_stylesheet(CSS::Parser::ParsingContext(document(), *response.url()), decoded_string);
  314. if (m_loaded_style_sheet) {
  315. m_loaded_style_sheet->set_owner_node(this);
  316. m_loaded_style_sheet->set_media(deprecated_attribute(HTML::AttributeNames::media));
  317. document().style_sheets().add_sheet(*m_loaded_style_sheet);
  318. } else {
  319. dbgln_if(CSS_LOADER_DEBUG, "HTMLLinkElement: Failed to parse stylesheet: {}", resource()->url());
  320. }
  321. // 2. Fire an event named load at el.
  322. dispatch_event(*DOM::Event::create(realm(), HTML::EventNames::load));
  323. }
  324. }
  325. }
  326. // 5. Otherwise, fire an event named error at el.
  327. else {
  328. dispatch_event(*DOM::Event::create(realm(), HTML::EventNames::error));
  329. }
  330. // FIXME: 6. If el contributes a script-blocking style sheet, then:
  331. // FIXME: 1. Assert: el's node document's script-blocking style sheet counter is greater than 0.
  332. // FIXME: 2. Decrement el's node document's script-blocking style sheet counter by 1.
  333. // 7. Unblock rendering on el.
  334. m_document_load_event_delayer.clear();
  335. }
  336. // https://html.spec.whatwg.org/multipage/semantics.html#process-the-linked-resource
  337. void HTMLLinkElement::process_linked_resource(bool success, Fetch::Infrastructure::Response const& response, Variant<Empty, Fetch::Infrastructure::FetchAlgorithms::ConsumeBodyFailureTag, ByteBuffer> body_bytes)
  338. {
  339. if (m_relationship & Relationship::Stylesheet)
  340. process_stylesheet_resource(success, response, body_bytes);
  341. }
  342. // https://html.spec.whatwg.org/multipage/semantics.html#linked-resource-fetch-setup-steps
  343. bool HTMLLinkElement::linked_resource_fetch_setup_steps(Fetch::Infrastructure::Request& request)
  344. {
  345. if (m_relationship & Relationship::Stylesheet)
  346. return stylesheet_linked_resource_fetch_setup_steps(request);
  347. return true;
  348. }
  349. // https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet:linked-resource-fetch-setup-steps
  350. bool HTMLLinkElement::stylesheet_linked_resource_fetch_setup_steps(Fetch::Infrastructure::Request& request)
  351. {
  352. // 1. If el's disabled attribute is set, then return false.
  353. if (has_attribute(AttributeNames::disabled))
  354. return false;
  355. // FIXME: 2. If el contributes a script-blocking style sheet, increment el's node document's script-blocking style sheet counter by 1.
  356. // 3. If el's media attribute's value matches the environment and el is potentially render-blocking, then block rendering on el.
  357. // FIXME: Check media attribute value.
  358. m_document_load_event_delayer.emplace(document());
  359. // 4. If el is currently render-blocking, then set request's render-blocking to true.
  360. // FIXME: Check if el is currently render-blocking.
  361. request.set_render_blocking(true);
  362. // 5. Return true.
  363. return true;
  364. }
  365. void HTMLLinkElement::resource_did_load_favicon()
  366. {
  367. VERIFY(m_relationship & (Relationship::Icon));
  368. if (!resource()->has_encoded_data()) {
  369. dbgln_if(SPAM_DEBUG, "Favicon downloaded, no encoded data");
  370. return;
  371. }
  372. dbgln_if(SPAM_DEBUG, "Favicon downloaded, {} bytes from {}", resource()->encoded_data().size(), resource()->url());
  373. document().check_favicon_after_loading_link_resource();
  374. }
  375. bool HTMLLinkElement::load_favicon_and_use_if_window_is_active()
  376. {
  377. if (!has_loaded_icon())
  378. return false;
  379. RefPtr<Gfx::Bitmap> favicon_bitmap;
  380. auto decoded_image = Platform::ImageCodecPlugin::the().decode_image(resource()->encoded_data());
  381. if (!decoded_image.has_value() || decoded_image->frames.is_empty()) {
  382. dbgln("Could not decode favicon {}", resource()->url());
  383. return false;
  384. }
  385. favicon_bitmap = decoded_image->frames[0].bitmap;
  386. dbgln_if(IMAGE_DECODER_DEBUG, "Decoded favicon, {}", favicon_bitmap->size());
  387. auto* page = document().page();
  388. if (!page)
  389. return favicon_bitmap;
  390. if (navigable() && navigable()->is_traversable()) {
  391. navigable()->traversable_navigable()->page()->client().page_did_change_favicon(*favicon_bitmap);
  392. }
  393. return false;
  394. }
  395. void HTMLLinkElement::visit_edges(Cell::Visitor& visitor)
  396. {
  397. Base::visit_edges(visitor);
  398. visitor.visit(m_loaded_style_sheet);
  399. }
  400. }