Article Directory
reason
Previously, I developed a WeChat applet, which has the function of uploading pictures. After it went online, it has been performing well, and the number of users has gradually increased.
But suddenly one day, I received a system message: reminding me that the applet has a content security risk, lacks a filtering mechanism for illegal content, and needs to be rectified. The message is as follows:
This message is a security risk warning, and it needs to be corrected and adjusted within a time limit, otherwise some functions of the applet will be disabled, such as being unable to be searched, opening the applet through the QR code, sharing the content of the applet, and jumping to other applets etc.
In view of this, it is absolutely impossible not to modify the applet, otherwise the relevant functions will be unavailable, and the search traffic will disappear, which will have a great impact.
Before making modifications, you must first understand the specific situation of the content review of the WeChat applet, and check it directly according to the link in the information prompt.
Types of content moderation
In the WeChat Mini Program Platform Operating Specifications - Code of Conduct - Content Security section, the following content is mentioned:
The Mini Program involves not setting up a mechanism to filter inappropriate information such as illegal and illegal content.
The content security detection interface must be called to verify whether the text/picture contains sensitive content, improve information security protection capabilities, and reduce the risk of spreading malicious content caused by malicious use.
For content security, currently it is mainly text input and image upload, which need to be tested for content security.
It is mainly aimed at harmful content such as pornography, political violations, and terrorism in the input text or uploaded pictures. Content review is required to filter sensitive information to ensure that the input content is safe.
In actual development, we can use the open interface provided by the WeChat applet to perform basic security checks on these two pieces of content:
as shown in the figure above, it is the text detection interface and the audio and picture detection interface provided by the WeChat applet. The AI program makes a judgment. Among them, the picture detection can also use another interface: imgSecCheckit is specially used to detect whether a picture violates laws and regulations.
There are multiple calling methods for the above interfaces, including https service, cloud calling, and third-party calling. This article will focus on the way of cloud calling. Before that, we need to understand the mini program cloud function.
Small program cloud development
WeChat provides a cloud development function. In the mini program, we can also easily establish a cloud development service to help us quickly develop functions and avoid setting up servers. For a specific introduction to WeChat cloud development, you can view the WeChat Mini Program Development Documentation.
If you want to use the cloud service in the applet, when we create the applet, we can choose to enable the WeChat cloud service:
one thing to be clear is that the cloud service provided by WeChat needs to be charged, and there is currently a one-month trial period, you can use it.
The focus of this article is not how to build a WeChat applet cloud development service, but the detection and processing of content security, so I will not introduce the content of cloud development one by one. There are various tutorials on the Internet, and you can search by yourself.
For content security detection, when we use cloud calls, we can use cloud functions, provided that cloud development services have been set up.
Image detection
Regarding the detection of pictures, use the cloud function, the interface method is: openapi.security.imgSecCheck.
Create a cloud function
First, configure the code permissions. In the applet project that has enabled the cloud service, there will be a cloudfunctionscloud directory. You can right-click to create a cloud function:
as shown in the figure above, click 新建Node.js云函数to create your own cloud function.
For example, if we create a cloud function checkImageSecnamed to process image detection, cloudfunctionsa folder checkImageSecnamed , and three files will be automatically created:
- config.json: basic configuration of cloud functions
- index.js: cloud function entry execution file
- package.json: cloud function project settings and package dependencies
As shown in the figure above, the file is automatically created. It should be noted here that in config.jsonthe file , we have to configure openapi.security.imgSecCheckthe interface permission, otherwise it cannot be called.
The cloud function here is essentially a Nodeservice , so it must be installed on the computer in the development environment Node.js. The cloud function relies on a package provided by WeChat by default: wx-server-sdk, which is used to create cloud objects.
Write image detection code
We can write the required image detection code in index.jsthe file and call openapi.security.imgSecCheckthe interface. The basic implementation is as follows:
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV })
// 云函数入口函数
exports.main = async (event) => {
const arrayBuffer = event.arrayBuffer
const contentType = event.contentType
const buf = Buffer.from(arrayBuffer)
const result = await cloud.openapi.security.imgSecCheck({
media: {
contentType,
value: buf
}
})
return result
}
The above code initializes cloudthe cloud object. In the entry function, the image information is received through parameters.
- arrayBuffer: image
ArrayBufferformat binary data, converted toBufferdata in Nodejs - contentType: MIME media type of the image
After setting, the cloud function is created checkImageSec, and the front end of the applet can call it to detect the picture.
Small program image processing
Before calling the cloud function, we first implement the image upload function of the applet.
upload picture
It is relatively simple to upload pictures in the applet, directly use the interface provided by the document chooseMediato select the media file (picture or video):
wx.chooseMedia({
count,
mediaType: ['image'],
sizeType: [ 'original' ],
sourceType: [ 'album' ],
success: (imgRes) => {
callBack && callBack(imgRes)
},
fail: () => {
}
})
With the above code, select a picture to upload from the mobile phone album, and the address of the temporary directory of the picture will be obtained tempFilePath.
The current picture comes from the original picture of the album. If the size is large or the format is wrong (such as webp format picture, etc.), it does not meet our needs, because the picture security detection interface has requirements imgSecCheckfor and format:
The image file to be detected, the format supports PNG, JPEG, JPG, GIF, and the image size does not exceed 750px x 1334px
Therefore, we also need to compress the received large-size pictures as little as possible.
Image Compression
Through the front end, image compression is performed in the applet. Of course, the canvas can be used. We first obtain the width and height information of the image through getImageInfothe interface :
wx.getImageInfo({
src: tempFilePath,
success: async (imgInfo) => {
try {
callBack && callBack(imgInfo)
}
},
fail: () => {
}
})
The above code obtains the information of the image imgInfo, which will include the local path, width, height and various information of the image, and we must use the width and height data to shrink the image.
To shrink the picture, we create a canvas element (id is checkCanvas), get the corresponding context object, and set the width and height of the picture to a maximum of 120, the code is as follows:
const SIZE = 120
const ratio = Math.max(imgInfo.width / SIZE, imgInfo.height / SIZE, 1)
const smallWidth = Math.trunc(imgInfo.width / ratio)
const smallHeight = Math.trunc(imgInfo.height / ratio)
// 将宽高大小设置到页面的canvas元素(checkCanvas)上
this.smallWidth = smallWidth
this.smallHeight = smallHeight
const ctx = wx.createCanvasContext('checkCanvas')
ctx.drawImage(imgInfo.path, 0, 0, smallWidth, smallHeight)
ctx.draw(false, function () {
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'checkCanvas',
width: smallWidth,
height: smallHeight,
destWidth: smallWidth,
destHeight: smallHeight,
success: (res) => {
resolve(res.tempFilePath)
},
fail: (e) => {
reject(e)
}
})
}, 100)
})
After the picture is reduced to less than 120, a new temporary picture file wx.canvasToTempFilePathis generated , and we can perform security checks on it next.
Cloud function security detection access
When writing Node.jsthe code , it is mentioned that the image parameters need to use Bufferthe data, and the front-end image data should be in ArrayBufferthe format of the data.
Temporary image files can be obtained through the file reading interface provided by the WeChat applet to obtain the corresponding ArrayBufferformat data:
const fsManager = wx.getFileSystemManager()
const bufferData = fsManager.readFileSync(imgFilePath)
readFileSyncThe interface will read the binary content of the file in ArrayBufferthe format , so that we can get the usable format data of the image file.
Then, we can call the cloud function for detection and processing, and the calling method is relatively simple:
wx.cloud.callFunction({
name: 'checkImageSec',
data: {
contentType: `image/png`,
arrayBuffer: bufferData
},
success: (res) => {
if (res.result.errCode === 0) {
console.log('合法图片' )
} else if (res.result.errCode === 87014) {
console.log('违法图片')
}
console.log('其他异常')
},
fail: () => {
console.log('检测失败')
}
})
So far, we call the cloud function, and the basic code for image content security detection is completed. Through this method, we can preliminarily detect whether the image is compliant, and prohibit illegal images from being uploaded and displayed.
text detection
The text detection calls the cloud open interface: openapi.security.msgSecCheck, the entire calling process is basically the same as that of the image detection, but there are some differences in data processing and parameter transmission due to the difference in data content.
In the cloud function part (Nodejs code), it needs to be passed in openid. By obtaining the WeChat context object ( cloud.getWXContext()), you can get the openid. We create a cloud function checkTextSecnamed . The core code is as follows:
exports.main = async (event) => {
const wxContext = cloud.getWXContext()
const openid = wxContext.OPENID
const content = event.content
const result = await cloud.openapi.security.msgSecCheck({
openid,
scene: 1,
version: 2,
content
})
}
The parameters here directly use the text content, that is, the string. We call the cloud function in the front part of the applet checkTextSec, pass in the input content of the text box, and check the text.
// content 输入框文本内容
wx.cloud.callFunction({
name: 'checkTextSec',
data: {
content },
success: (res) => {
if (res.result.errCode === 0) {
if (res.result.result.label === 100) {
console.log('合法文本')
} else {
console.log('违法文本')
}
} else {
console.log('其他异常')
}
},
fail: () => {
console.log('处理失败')
}
})
The above code is to call the cloud function to process the security detection of the text content, which is basically similar to the image detection.
final pit
Although we have used the open services provided by the WeChat Mini Program to conduct security checks on images and text, the problem cannot be completely solved. There are reminders in the WeChat Mini Program developer documentation:
It is suggested that developers should conduct manual review to make up for the lack of AI intelligent review.
In order to conduct manual review, it is necessary to upload the user's picture and input text, and deal with it through background review intervention. This cost can be said to be very high, and many small programs cannot do it.
Therefore, when our small program is banned due to content security, when we appeal to WeChat customer service staff, if the WeChat customer service staff insists on manual review, for individual developers, the small program is basically finished and can be discarded directly. use.
Because the probability of failure of the appeal is too great!