Aleksandar Perisic apsolut

Frontend Security

	Security Measure	Description
☐	Use HTTPS everywhere	Prevents basic eavesdropping and man-in-the-middle attacks
☐	Input validation and sanitization	Prevents XSS attacks by validating all user inputs
☐	Don't store sensitive data in the browser	No secrets in localStorage or client-side code
☐	CSRF protection	Implement anti-CSRF tokens for forms and state-changing requests
☐	Never expose API keys in frontend	API credentials should always remain server-side

Sometimes, a customer might have data being loaded programmatically into a page and want that data to write to form fields. Because HubSpot Forms are generated programmatically with React, there need to be two considerations in your code that make setting fields programmatically more difficult:

The data must be inserted after the form has finished loading
Data that is inserted programmatically must have a js "change" event fired on the field in order to propagate the change into the React data layer

These two considerations are handled separately.

Inserting form data after form load

There are two methods to handle this - one including jQuery and one using vanilla javascript

	<!-- Add this code if you would like accordions on your Category Page -->

	<div class="container-divider"></div>
	<div class="container">
	<nav class="sub-nav">
	{{breadcrumbs}}
	{{search submit=false}}
	</nav>

	<script>

	const uaIOS14 = navigator.userAgent;
	if (
	/iPhone/.test(uaIOS14) &&
	/OS 14_/.test(uaIOS14) && // Specifically checks for iOS 14.x
	!/OS 14_/.test(uaIOS14) // Excludes iOS 15+ and newer
	) {
	console.log('iOS 14');
	document.querySelector('#hs-banner-parent #hs-eu-cookie-confirmation')

	$(document).ready(function(){
	$(".content").hide();
	$(".content").slice(0, 8).show();
	$("#loadMore").on("click", function(e){
	e.preventDefault();
	$(".content:hidden").slice(0, 3).slideDown();
	if($(".content:hidden").length == 0) {
	$("#loadMore").hide();
	$(".completed").show();
	}


	document.addEventListener('DOMContentLoaded', function() {
	const eventList = document.querySelector('.event-list');
	const searchInput = document.getElementById('searchInput');
	const eventTypeFilter = document.getElementById('eventTypeFilter');
	const industryFilter = document.getElementById('industryFilter');
	const countryFilter = document.getElementById('countryFilter');
	const toggleFiltersBtn = document.getElementById('toggleFilters');
	const filtersContainer = document.getElementById('filters');

	<h2 class="event-heading">Past Items</h2>
	{% for item in past_items %}
	<article class="event-item past-item">
	<div class="event-date-time">
	<time datetime="2024-09-25" class="event-date">{{ item.event_date\|datetimeformat('%B %d, %Y') }}</time>
	<p class="event-time">{{ item.event_date\|datetimeformat('%H:%M') }}</p>
	</div>
	<div class="event-content">
	<h2 class="event-title">{{ item.event_title }}</h2>
	<div class="event-tags">

	<div class="featured-posts-container">
	{% set featured_posts = blog_recent_topic_posts('default', 'featured', 3) %}

	{% for topic_post in featured_posts %}
	<a href="{{ topic_post.absolute_url }}" class="featured-post">
	<div class="topic-post " style="padding: 10px;">

	<div class="topic-text">
	<p>{{ topic_post.tag_list }}</p>
	<h2>{{ topic_post.name }}</h2>

	<div class="post-listing">
	{% set post_ids = [] %}
	{% for post_item in module.posts %}
	{% do post_ids.append(post_item.post_id) %}
	{% endfor %}

	{% if post_ids %}
	<div class="post-listing">
	{% for post_id in post_ids %}
	{% set pageContents = content_by_ids([post_id]) %}