Prevent image hotlinking with S3 and CloudFront using serverlesss framework

I have a s3 bucket which has some flowchart-diagrams (static content) that I have made, I don’t want other people to use it in their websites, I am delivering these diagrams to my website using CLOUDFRONT. The images are in the same domain in a subfolder (dev.mysite.com/my_card/2). basically I have cards in my website , each card has a specific id and a flowchart diagram associated with it. I want to associate AWS WAF with CLOUDFRONT to prevent hotlinking.

I have read this blog but I am not sure how this can be done using serverless as I am pretty new to serverless framework. I know how to add AWS-MANAGED-RULE groups but don’t know how to add custom rules.

I reccomend you using CloudFlare if you can. They have an option of hotlink protection.