This week, we take a look at how Twitter API erroneously allowed browsers to cache sensitive data, and how skimmers have found a way to use Google Analytics APIs to get their hands on credit card data. Plus, there is a live demo of API hacking, as well as a new book on API security.
Vulnerability: Twitter
HTTP headers can play an important role in API security, like the case with Twitter API shows. The header cache-control:no-store had not been set on the API, which meant that the data that this API returned to the web page was stored in the browser cache.
Differences Between Static Generated Sites And Server-Side Rendered Apps
Differences Between Static Generated Sites And Server-Side Rendered Apps
Timi Omoyeni
JavaScript currently has three types of applications that you can build with: Single Page Applications (SPAs), pre-rendering/static generated sites and server-side rendered applications. SPAs come with many challenges, one of which is Search Engine Optimization (SEO). Possible solutions are to make use of Static Site Generators or Server-Side Rendering (SSR).
In this article, I’m going to explain them alongside listing their pros and cons so you have a balanced view. We’re going to look at what static generated/pre-rendering is as well as frameworks such as Gatsby and VuePress that help in creating statically generated sites. We’re also going to look at what server-side rendered (SSR) applications are as well as frameworks like Nextjs and Nuxtjs that can help you create SSR applications. Finally, we’re going to cover the differences between these two methods and which of them you should use when building your next application.
Note: You can find all the code snippets in this article on GitHub.
What Is A Static Site Generator?
A Static Site Generator (SSG) is a software application that creates HTML pages from templates or components and a given content source. You give it some text files and content, and the generator will give you back a complete website, and this completed website is referred to as a static generated site. What this means is that your site pages are generated at build time and your site content does not change unless you add new contents or components and “rebuild” or you have to rebuild your site if you want it to be updated with new content.
This approach is good for building applications that the content does not change too often — sites that the content does not have to change depending on the user, and sites that do not have a lot of user-generated content. An example of such a site is a blog or a personal website. Let’s look at some advantages of using static generated sites.
PROS
Fast website: Since all of your site’s pages and content have been generated at build time, you do not have to worry about API calls to the server for content and this makes your site very fast.
Easy to deploy: After your static site has been generated, you would be left with static files, and hence, it can be easily deployed to platforms like Netlify.
Security: Static generated site are solely composed of static files, the risk of being vulnerable to cyber attacks is minimal. This is because static generated sites have no database, attackers cannot inject malicious code or exploit your database.
You can use version control software (e.g git) to manage and track changes to your content. This can come in handy when you want to roll back changes you made to the content on your site.
CONS
Content can become stale if it changes too quickly.
To update its content, you have to rebuild the site.
Build time would increase depending on the size of the application.
Examples of static site generators are GatsbyJS and VuePress. Let us take a look at how to create static sites using these two generators.
“Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps.”
This means developers familiar with React would find it easy to get started with Gatsby.
To use this generator, you first have to install it using NPM:
npm install -g gatsby-cli
This will install Gatsby globally on your machine, you only have to run this command once on your machine. After this installation is complete, you can create your first static site generator using the following command.
gatsby new demo-gatsby
This command will create a new Gatsby project that I have named demo-gatsby. When this is done, you can start up your app server by running the following command:
cd demo-gatsby
gatsby develop
Your Gatsby application should be running on localhost:8000.
For this tutorial, we’re only going to look at the src/pages folder. This folder contains files that would be generated into routes on your site.
To test this, let us add a new file (newPage.js) to this folder:
import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
const NewPage = () => (
<Layout>
<SEO title="My New Page" />
<h1>Hello Gatsby</h1>
<p>This is my first Gatsby Page</p>
<button>
<Link to='/'>Home</Link>
</button>
</Layout>
)
export default NewPage
Here, we import React from the react package so when your code is transpiled to pure JavaScript, references to React will appear there. We also import a Link component from gatsby and this is one of React’s route tag that is used in place of the native anchor tag ( <a href='#'>Link</a>). It accepts a to prop that takes a route as a value.
We import a Layout component that was added to your app by default. This component handles the layout of pages nested inside it. We also import the SEO component into this new file. This component accepts a title prop and configures this value as part of your page’s metadata. Finally, we export the function NewPage that returns a JSX containing your new page’s content.
And in your index.js file, add a link to this new page we just created:
import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
const IndexPage = () => (
<Layout>
<SEO title="Home" />
<h1>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
<Image />
</div>
<Link to="/page-2/">Go to page 2</Link>
{/* new link */}
<button>
<Link to="/newPage/">Go to New Page</Link>
</button>
</Layout>
)
export default IndexPage
Here, we import the same components that were used in newPage.js file and they perform the same function in this file. We also import an Image component from our components folder. This component is added by default to your Gatsby application and it helps in lazy loading images and serving reduced file size. Finally, we export a function IndexPage that returns JSX containing our new link and some default content.
Now, if we open our browser, we should see our new link at the bottom of the page.
VuePress is a static site generator that is powered by Vue, Vue Router and Webpack. It requires little to no configuration for you to get started with it. While there are a number of tools that are static site generators, VuePress stands out from amongst the pack for a single reason: its primary directive is to make it easier for developers to create and maintain great documentation for their projects.
To use VuePress, you first have to install it:
//globally
yarn global add vuepress # OR npm install -g vuepress
//in an existing project
yarn add -D vuepress # OR npm install -D vuepress
Once the installation process is done, you can run the following command in your terminal:
# create the project folder
mkdir demo-vuepress && cd demo-vuepress
# create a markdown file
echo '# Hello VuePress' > README.md
# start writing
vuepress dev
Here, we create a folder for our VuePress application, add a README.md file with # Hello VuePress as the only content inside this file, and finally, start up our server.
When this is done, our application should be running on localhost:8080 and we should see this in our browser:
To add a new page to your VuePress site, you add a new markdown file to the root directory and name it whatever you want the route to be. In this case, I’ve gone ahead to name it Page-2.md and added the following to the file:
# hello World
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
And now, if you navigate to /page-2 in your browser, we should see this:
Server-Side Rendering (SSR), is the process of displaying web-pages on the server and passing it to the browser/client-side instead of rendering it in the browser. Server-side sends a fully rendered page to the client; the client’s JavaScript bundle takes over and allows the SPA framework to operate.
This means if you have an application that is server-side rendered, your content is fetched on the server side and passed to your browser to display to your user. With client-side rendering it is different, you would have to navigate to that page first before it fetches data from your server meaning your user would have to wait for some seconds before they’re served with the content on that page. Applications that have SSR enabled are called Server-side rendered applications.
This approach is good for building complex applications that require user interaction, rely on a database, or where the content changes very often. This is because content on these sites changes very often and the users need to see the updated content as soon as they’re updated. It is also good for applications that have tailored content depending on who is viewing it and applications where you need to store user-specific data like email and user preference while also catering for SEO. An example of this is a large e-commerce platform or a social media site. Let us look at some of the advantages of server-side rendering your applications.
Pros
Content is up to date because it fetches content on the go;
Your site loads fast because it fetches its content on the server-side before rendering it to the user;
Since in SSR JavaScript is rendered server-side, your users’ devices have little relevance to the load time of your page and this leads to better performance.
CONS
More API calls to the server since they’re made per request;
Cannot deploy to a static CDN.
Further examples of frameworks that offer SSR are Next.js and Nuxt.js.
Next.js
Next.js is a React.js framework that helps in building static sites, server-side rendered applications, and so on. Since it was built on React, knowledge of React is required to use this framework.
To create a Next.js app, you need to run the following:
npm init next-app
# or
yarn create next-app
You would be prompted to choose a name your application, I have named my application demo-next. The next option would be to select a template and I’ve selected the Default starter app after which it begins to set up your app. When this is done, we can now start our application
cd demo-next
yarn dev
# or npm run dev
Your application should be running on localhost:3000 and you should see this in your browser;
The page that is being rendered can be found in pages/index.js so if you open this file and modify the JSX inside the Home function, it would reflect in your browser. Replace the JSX with this:
In this file, we make use of Next.js Head component to set our page’s metadata title and favicon for this page. We also export a Home function that returns a JSX containing our page’s content. This JSX contains our Head component together with our main page’s content. It also contains two style tags, one for styling this page and the other for the global styling of the app.
Now, you should see that the content on your app has changed to this:
Now if we want to add a new page to our app, we have to add a new file inside the /pages folder. Routes are automatically created based on the /pages folder structure, this means that if you have a folder structure that looks like this:
So in your pages folder, add a new file and name it hello.js then add the following to it:
import Head from 'next/head'
export default function Hello() {
return (
<div>
<Head>
<title>Hello World</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className='container'>
<h1 className='title'>
Hello <a href="https://en.wikipedia.org/wiki/Hello_World_(film)">World</a>
</h1>
<p className='subtitle'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem provident soluta, sit explicabo impedit nobis accusantium? Nihil beatae, accusamus modi assumenda, optio omnis aliquid nobis magnam facilis ipsam eum saepe!</p>
</main>
<style jsx> {`
.container {
margin: 0 auto;
min-height: 100vh;
max-width: 800px;
text-align: center;
}
.title {
font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
}
.subtitle {
font-weight: 300;
font-size: 22px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
`} </style>
</div>
)
}
This page is identical to the landing page we already have, we only changed the content and added new styling to the JSX. Now if we visit localhost:3000/hello, we should see our new page:
Finally, we need to add a link to this new page on our index.js page, and to do this, we make use of Next’s Link component. To do that, we have to import it first.
# index.js
import Link from 'next/link'
#Add this to your JSX
<Link href='/hello'>
<Link href='/hello'>
<a>Next</a>
</Link>
This link component is how we add links to pages created in Next in our application.
Now if we go back to our homepage and click on this link, it would take us to our /hello page.
“Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). Nuxt’s goal is to make web development powerful and performant with a great developer experience in mind.”
It is based on Vue.js so that means Vue.js developers would find it easy getting started with it and knowledge of Vue.js is required to use this framework.
To create a Nuxt.js app, you need to run the following command in your terminal:
yarn create nuxt-app <project-name>
# or npx
npx create-nuxt-app <project-name>
This would prompt you to select a name along with some other options. I named mine demo-nuxt and selected default options for the other options. When this is done, you can open your app folder and open pages/index.vue. Every file in this folder file is turned into a route and so our landing page is controlled by index.vue file. So if you update it with the following:
We can see that this page displays the content we added in to index.vue. The router structure works the same way Next.js router works; it renders every file inside /pages folder into a page. So let us add a new page (hello.vue) to our application.
<template>
<div>
<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsa vitae tempora perferendis, voluptate a accusantium itaque vel ex, provident autem quod rem saepe ullam hic explicabo voluptas, libero distinctio?</p>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
So if you open localhost:3000/hello, you should see your new page in your browser.
Now that we have looked at both static-site generators and server-side rendering and how to get started with them by using some popular tools, let us look at the differences between them.
Static Sites Generators
Server-Side Rendering
Can easily be deployed to a static CDN
Cannot be deployed to a static CDN
Content and pages are generated at build time
Content and pages are generated per request
Content can become stale quickly
Content is always up to date
Fewer API calls since it only makes it at build time
Makes API calls each time a new page is visited
Conclusion
We can see why it is so easy to think both static generated sites and server-side rendered applications are the same. Now that we know the differences between them are, I would advise that we try to learn more on how to build both static generated sites and server-side rendered applications in order to fully understand the differences between them.
Further Resources
Here are some useful links that are bound to help you get started in no time:
Forms allow users to submit information on your website. However, they can also be used by hackers to steal information, attack websites, and install malicious code.
In this article, we will show you how to create a secure contact form in WordPress. We’ll explain how to ensure secure WordPress form submissions on your site.
Here is a summary of what we’ll cover in this article.
To make your WordPress contact form secure, you need two things.
A secure WordPress contact form plugin
A secure WordPress hosting environment
Let’s start with the form plugin.
1. Choosing a Secure Contact Form Plugin
A secure contact form plugin allows you to save form entries securely on your website. It also allows you to use secure email methods to deliver your form notifications.
What is SSL? And why do you need it to secure WordPress forms?
SSL stands for Secure Sockets Layer. It switches your WordPress site from HTTP to HTTPs (secure HTTP). You’ll notice a padlock icon next to your website indicating that it is using SSL protocol to transfer data.
SSL protects your information by encrypting the data transfer between a user’s browser and the website. This adds WordPress form encryption support which makes it harder for hackers to steal data.
That being said, now let’s take a look at how to create a secure contact form in WordPress.
Creating a Secure Contact Form in WordPress
Creating a secure WordPress contact form is easy if you already checked the above-mentioned requirements. See our tutorial on how to quickly add a contact form in WordPress if you haven’t already done so.
Next, is to add more security layers to your WordPress contact form. This helps you keep form data safe and also helps you reduce spam and improve your website performance.
The following are some of the most common ways someone can steal information or abuse your WordPress forms.
First, they can sniff the information as it is submitted by a form. You can address this by using a secure WordPress hosting platform and enabling SSL encryption on your website.
The next part is when your WordPress form sends notification emails. Business email services are not part of WordPress, and if you are not properly sending those emails, then they can be insecure.
Lastly, your WordPress forms can be abused to send spam messages and DDoS attacks. If you are using a custom WordPress login form, then hackers can use brute force attacks to login to your WordPress site.
Now let’s address each one of them to make your WordPress forms more secure.
Securing WordPress Contact Form Email Notifications
As we mentioned earlier, insecure emails can be spied upon and are unsafe. There are two ways you can handle form notification emails.
1. Don’t send form data via email notifications
The first thing you would want to consider is not sending form data via emails.
For instance, when someone submits your contact form, you only get an email alert that someone has submitted form and not the form data itself.
WPForms comes with a built-in entry management system that stores your form data in your WordPress database. You can simply go to WPForms » Entries page to view all form submissions.
Note: You’ll need to upgrade to the paid version of WPForms for entry management features.
2. Send secure WordPress form notification emails
For some users, sending form notification emails is necessary for their business.
For instance, if you have an online order form, a donations form, or a payment form, then you may need to send email notifications to your users.
For this, you need to set up a proper SMTP service to securely send emails.
SMTP stands for Secure Mail Transfer Protocol. It is the industry standard to securely send emails on the internet.
We recommend using G Suite which allows you to create a professional business email address. Powered by Google, it allows you to use the familiar Gmail interface to send and receive emails.
However, if you’ll be sending a lot of emails, then we recommend using Sendinblue, Amazon SES, or any of the reliable SMTP service providers.
Next, you need to connect your email service to WordPress so that all your WordPress form notifications are sent using your secure email connection.
To do that, you need to install and activate the WP Mail SMTP plugin. It works with any SMTP email service and allows you to easily send WordPress emails securely.
Securing WordPress Forms Against Spam and DDoS Attacks
Your website forms are publicly accessible. This means anyone can access and fill them. We’ll cover restricting form access to specific users in the next step, but for this step we will address public forms.
When your form is accessible by anyone on the internet, it can become a target for spammers and hackers. While spammers try to use your form for fraudulent activities, hackers may try to use it to gain access to your website or even bring it down.
Luckily, WPForms comes with several spam-prevention features. It also automatically enables honeypot anti-spam technique on all forms.
Honeypot basically obscures form fields from automated spambots. However, it is not the most effective way to protect online forms.
If you suspect that your forms are abused or under attack, then you can deploy the following spam protection tools.
1. Enable Google reCAPTCHA in Your Forms
WPForms comes with Google reCAPTCHA support. Simply go to WPForms » Settings page and click on the reCAPTCHA tab.
Google offers three types of reCAPTCHA tools. We recommend using checkbox reCAPTCHA v2 because it is more user-friendly.
You’ll need site key and secret key to enable reCAPTCHA on your site. Simply go to the reCAPTCHA website and click on the ‘Admin Console’ button at the top.
Next, you can go ahead and your website details. Provide a label for your site and then choose reCAPTCHA v2 with ‘I am not a robot’ checkbox.
Click on the Submit button to continue and you’ll see the API keys.
Go ahead and copy these keys and paste them in WPForms settings page. Don’t forget to click on the ‘Save Settings’ button to store your changes.
You can now edit your form and add the reCAPTCHA field to your form.
You’ll see a notification that reCAPTCHA is now enabled for your form. You can go ahead and save your form.
If you haven’t already added form to your website, then you can simply edit the post or page where you want to display the form and add the WPForms block to the content area.
Simply select your form in the drop down menu and WPForms will load a preview of your form. You can now save your post or page and visit it in a new browser tab to see your form with the reCAPTCHA field in action.
2. Enable Custom Captcha for Your WordPress Forms
If you don’t want to use Google reCAPTCHA, then you can use your own math quiz or questions with WPForms Custom Captcha addon.
Note: You’ll need pro version of the plugin to access custom captcha addon.
Simply head over to WPForms » Addons page to install and activate the Custom Captcha addon.
After that, you can edit your contact form and add the Captcha field to your form.
By default, it adds a random math question. You can change that to add your own custom captcha by changing the captcha type to text.
You can now save your form, and it to a post or page using the WPForms block.
You can now visit your post or page to see the custom captcha in action.
Restricting WordPress Forms Access to Certain Users
Another way to protect your WordPress forms is to restrict access to logged-in members, or through a unique form password.
WPForms comes with a Form Locker addon that lets you enable various form permissions and access control rules.
With form locker you can:
Password Protect Forms – this requires users to enter a password to submit the form. This added protection helps decrease the number of unwanted form submission.
Close Form Submissions After Specific Date / Time – this is great for any kind of application forms or other time-sensitive forms.
Limit the number of total submissions – this is great for contests or giveaways. Once the max number of entries are in, the WPForms will automatically close the form.
Limit one entry per person – if you want to avoid duplicate submissions, then you will love this option. This is very useful for scholarship applications, giveaways, etc.
Restrict Forms to Members Only – you can restrict your forms to logged-in users of your WordPress site. This is great for membership sites or businesses who want to restrict support to paid customers only.
You can access the Form Locker settings inside the Form Builder Settings panel:
Keeping Your WordPress Site Secure
The security of your WordPress forms depends on the security of your entire WordPress website. With some simple steps, you can strengthen your WordPress website security.
We recommend using Sucuri, as the best WordPress security plugin on the market. It comes with a website firewall that blocks any suspicious activity even before it reaches your website.
This is the July 2020 edition of “This Month in WordPress with CodeinWP.” Hello WordPress aficionados, welcome to this month’s roundup of news about the world’s most popular CMS. I’m writing this post from the base of the mountains, where part of our team is hanging out for a few days to work and spend some time together.